Creating Reusable Directives in AngularJS 

Excellent video, very clear and precise.

Yo, just commenting since there is no comment from past 4 years. Great video thanks

The difference between assinging scope to be "true" and "{}" is that in the first case the directive's scope becomes an instance of the parent scope (the scope of the parent controller) and therefore can use its data. But when we write 'scope: {}', we get a fully isolated scope without direct access to the parent scope.

Hi Joe, Awesome Video. Just an FYI. There are three types of scopes in angular directives. 1. Shared Scope 2. Inherited Scope 3. Isolated Scope. Ex: scope:false (shared scope and its default) scope:true (inherited scope. parent scope is visible) scope:{} (isolated scope parent scope is not visible).

There is a difference when we set scope:true or scope:{} when set to true , it means that directive template can inherit scope from the parent directives or controllers. but not the siblings. when set to {}, it means that no outer scope is available in the directive template.

this is the best angularjs directive tutorial so far.

These videos got me my start in pro web dev.

@11:40 you said {} works and true works also and you didn't know why {} works. I believe the reason why it works is because it is looking for a truthy statement and in JavaScript and empty object literal is a truthy value. ({} == true) is true or you can just test it with !!{} It is one of the weird things about JS.

Good questions, Miguel! First, yes, I am injecting the module into APP, and the module could contain multiple directives and more (services, factories, etc.) As far as having a module for every directive, I would consider the complexity and potential for reuse in other projects before creating a new module. In my example I took something trivial and created a module to teach the concept and and show the method, but the example directive would not have warranted it in production.

Better separation is certainly a good goal, but there are a number of ways to achieve this without requiring jQuery. You could use the templateUrl option in the directive linking to an external HTML file, or a an inline template script with a type of "text/ng-template."

I get the loud keyboard thing a lot... I think I have situated things better in later videos to avoid it being so loud. Who knows... maybe it's my trademark now.

Thanks Mauricio. I am almost jealous of you... that first time that Angular starts to makes sense is really exciting.

scope: true - this creates a new scope for the directive that prototypically inherits from the parent scope (so that you have access to parent scope data). Downside (or not) is that if you have several directives on an element (e.g. as attributes), there's only one scope created for them (inherited from the element's scope) scope: {} - it creates a new, "isolated" scope. it means it does not inherit from parent scope, so you don't worry about parent vars - useful for reusable components :)

Luckily, no parent scopes were harmed in the making of this example, but thanks for the pointer, Michael.

Thank you for this good tutorial, I think for a good separation fo html and javascript code , we have to create the template inside html in a script tag and use it with jQuery .html() method in the template attribute of angular.js. Do you agree with me ?

Sorry a bit off-topic, but how did you setup sublime to get to create a HTML 5 blank template ? Do you have other handy tips like these ? perhaps make a video, also about bower and other bits would be useful ?

Thank you so much! until now i didnt know what directives was, or where to use... now i'm full of ideas for my project! Sir, you rock!

That's a great tutorial, Thanks, Could you share how to use combined restrict option in a directive, like restrict : 'ECA', ?

Good explanation of writing a directive...to the point.

Thanks Joe, I've read/watched quite a few directive tutorials, yours really helped me on the link function. Thanks!

This video is really awesome. The explanation is crystal clear. Thank you Joe for presenting such a nice tutorial.

Thanks heaps. I was looking for the "re-usability" part of the directive. Very well explained.

That's a great simple introduction that shows many aspects of Directives. Thanks.

Wow! Very simple and very useful. Now I fully understand how to develop reusable form parts in Angularjs. Thank you so much.

best AngularJS tutorial out here.Thanks Joe Maddalone...

Very helpful. I find so many things posted are unhelpful and leave me frustrated and this does just the opposite. Please keep posting your thoughts/discoveries.

hey @Joe Maddalone, that plugins and all you installing by command prompt is there any othere way i mean downloading from website and put that in directory and work from there.. please guide me, I am rookie in angular

simple and superbb video...keep up the spirit :) you got +1 subscriber..

Hi Joe, with this video you helped me out to understand the "module" concept and I'm very grateful to you

Very straightforward! This is the perfect way to teach intermediate developers.

This is the second time one of your framework videos has helped me. Thanks for putting this together! I like how the example is lean enough to type into an editor, then tweak it until you understand how it works.

Very helpful! Thanks very much for this tutorial!

Very Very helpful, I know how to write my own directive now, thank you so much

@Joe Maddalone "That's really cool explanation"

Nice video, This is the first time i am able to write my own directive because of your video

Very Instructive. Just what I was looking for. Thanks for this.

This really helped alot! This tutorial is on point. Thank you!

Very useful - and very concise. Thank you!

Great stuff, Joe! Thanks for putting it together!

Thx for video! Please recording more video about angularjs

Awesome vid. Thank you =)

Very good. Simple and direct.

Awesome.Thanks a lot :)

Simply awesome, thanks for defining in such a simple way. You covered almost all important I was looking for. Thanks again!!!

Hey Joe :) At the end of the video you are putting the directive into a module and you are inserting the js file into the index.html page. So I was wondering, if my application gets really big and I have let's say 10 different modules each having different directive(s), do I have to include every js with the directives manually in the index.html file? Do you know if there is another way to gather all this directives in one place and include all js files just once into index.html ? Thank you, Gabriela

very clear! Thank you

i luv u mowah , no homo :)

This was awesome!!

Awesome :)

great !

awesome..

Just discovered something that sounded a bit odd, the Link and Template don't work together now in context of this example. What is happening is that the template is rendered before the attributes are picked up from the link function. Another video tells me that transclude does the trick ? But i could not figure out how to pickup attributes in a template by setting transclude:true ? Any Tips ?