Angular js : Unable to create directive

Question

I am trying to create directive but my directive function is not getting called.

index.html

<div ng-repeat="que in questions.Cars">
                             <question-dir>print from direcetive</question-dir>
</div>

ConytrolDirective.js

(function () {
    "use strict";

    angular
        .module("autoQuote")
        .directive('questionDir',["questionDir"] );

    function questionDir()
    {
        return {
            template : "<h1>Made by a directive!</h1>"
        };
    }

}());

Pankaj Parkar · Accepted Answer · 2016-07-15T09:55:42.070

4

There are several mistakes in your code.

You should have function name instead of "questionDir"
.directive('questionDir',[questionDir] );
Use kebab case(- separated words) while using directive name
```
`<question-dir>print from direcetive</question-dir>`
```
Additionally you need to refer <script src="controlDirectives.js"></script> on your index.html page.

Demo here

edited Jul 15 '16 at 09:55

answered Jul 15 '16 at 09:06

Pankaj Parkar

134,766
23
234
299

thank you for the response. I updated code still no change. – Praveen D Jul 15 '16 at 09:18
Did you checked my plunkr? – Pankaj Parkar Jul 15 '16 at 09:33
How to pass que to each directive? – Praveen D Jul 15 '16 at 09:54

score 1 · Answer 2 · edited May 23 '17 at 12:16

I don't see many mistakes in your code but it would have helped many to stop assuming only if you had posted your code sample link too.

But one primary change you have to make is : Change your directive definition function invoking from

.directive('questionDir', ["questionDir"])

to

.directive('questionDir', questionDir)

See this working fiddle which has just added questions.Cars into $rootScope to make answer look more relevant to your query.

To preserve content of your directive element :

What i see in your question is : Element <question-dir> has child content / inner text print from direcetive in it and it gets overridden by Directive Element <h1>Made by a directive!</h1> completely.

That's the default nature of Angular : Element's (to which the directive is being applied) children will be lost to Directive Element. If you wanted to perserve the element's original content/children you would have to translude it.

Use transclude : true in Directive Definition Object and add <div ng-transclude></div> where you want directive Content / text print from direcetive to be included.

Code snippet :

function questionDir() {
  return {
    transclude : true,
    template: "<div ng-transclude></div><h1>Made by a directive!</h1>"
  };
}

Check this one for transclude changes.

Check these 2 links for more information on Transclude :

Martin · Answer 3 · 2016-07-15T10:36:24.400

You had a few things wrong in you code:

In your IIFE closure you need to pass in angular
You need to normalize the directive name to kabab case in your html element name: `'
You need to include the reference to the directory factory in your directive registration: .directive('questionDir', questionDir);
Missing module dependencies array: .module("autoQuote", []) -- you should only have this defined once with the dependancies, [] so ignore this if you already have it elsewhere in your code.
Missing restrict in the Directive Definition Object: restrict: 'E',

If you click on Run code snippet you will see this directive now works.

(function (angular) {
    "use strict";

    angular
        .module("autoQuote", [])
        .directive('questionDir', questionDir);

    function questionDir()
    {
        return {
            restrict: 'E',
            template: "<h1>Made by a directive!</h1>"
        };
    }

}(angular));

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="autoQuote">
  
    <question-dir>print from direcetive</question-dir>

</div>

Finally, if you are using AngularJS 1.5 or greater you should consider using the component syntax for this.

Its `IIFE` not `IIFY` and it isn't compulsory to pass `angular` parameter there. Its good to have practice.. — Pankaj Parkar, Jul 15 '16 at 09:47

Angular js : Unable to create directive

3 Answers3