how to write a directive in angularjs

Question

i like to make a custom component using directive. i checked lot of tutorials and its get confusing me can anyone explain how a directive works. the component i am planing to make is

<shout-list></shout-list>

the template for shout list will be like this

<div class="shout" ng-repeat="shout in shouts">
 <p>{{shout.message}}</p>
 <img src="media/images/delete.png" width="32" height="32" ng-click="deleteShout({{$index}},'{{shout._id}}')"/>
</div> 

• Maxim Ponomarev: Short videos from egghead.io helps me to understand directives. And videos from blogpost About those directives from official AngularJS blog.
• Jaison Justus: i watched the video but i am confused in when to use compiler and linker
• Maxim Ponomarev: In common words: compiler should used for modify the template, linker for binding data to the compiled template
• Jaison Justus: @MaximPonomarev in which case do you use compiler and linker? can you specify on situation when we are gonna use it..
• Sean Clark Hess: I wrote a blog article to get people started writing directives: seanhess.github.io/2013/10/14/angularjs-directive-design.html

Answer 1

Here's your directive, with some inline comments:

angular.module( 'directives', [] ).directive( 'shoutList', function () {
 return {
 restrict: 'E', // allow as an element; the default is only an attribute
 scope: { // create an isolate scope
 shouts: '=' // map the var in the shouts attribute to this scope
 },
 templateUrl: 'templates/shoutList.html', // load the template file
 controller: function ( $scope ) {
 // we declare a your function for use in the view
 $scope.deleteShout = function ( idx, id ) {
 // do whatever
 };
 }
 };
});

And the template file:

<div class="shout" ng-repeat="shout in shouts">
 <p>{{shout.message}}</p>
 <img src="media/images/delete.png" width="32" height="32" 
 ng-click="deleteShout({{$index}},'{{shout._id}}')" />
</div> 

And now you can use it in your code, like so:

Controller:

.controller( 'MainCtrl', function ( $scope ) {
 $scope.myShouts = // ...
});

View:

<shout-list shouts="myShouts"></shout-list>

Hope this helps!

• Jaison Justus: thank you very much. in which case we use compiler and linker methods. if possible can you explain by concatenating to the answer above.
• Mark Rajcok: @Jaison, see difference between compile and link function
• Mark Rajcok: @Josh, do you have an opinion about where the deleteShout function should be defined: as you show in a controller vs defining it in the link function: link: function(scope) { scope.deleteShout = function(...) {...} }?
• Josh David Miller: @MarkRajcok Only a very weak opinion. As I understand it, there are only a few subtle differences between the controller and link functions (e.g. ctrls run first), but that none of those impact this example. To me, it makes more sense for scope-manipulation functions to occur inside a controller just for consistency with the rest of the framework, but it doesn't really matter. But really, in this case I wouldn't even do deleteShout in the directive; the directive should focus on the DOM stuff and should call an '&' attr to do the actual deletion, what with separation of concerns and all...
• Mark Rajcok: @Jaison, in case it isn't obvious: when you define a controller inside a directive like Josh shows, then, every place where you use the directive in the HTML, a controller is created and it is automatically associated with the directive's scope. It is almost as if "ng-controller" were added wherever you use the directive.