Creating Reusable Directives in AngularJS

[@AWESOMEJX271]

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.

[@edko8286]

this is the best angularjs directive tutorial so far.

[@mujib517]

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).

[@Andrea-Giachetto]

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

[@everdimension]

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.

[@heymauriciosoares]

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!

[@bengienickSerrano]

Excellent video, very clear and precise.

[@SAlmanKhanDev]

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

[@Tefrax]

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

[@TarekFaham]

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

[@JoeMaddalone]

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

[@akhilnegi100]

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

[@JoeMaddalone]

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.

[@nonefvnfvnjnjnjevjenjvonej3384]

These videos got me my start in pro web dev.

[@MarcosMaiaGroo]

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

[@mustaphag]

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

[@prithvisinh]

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

[@dhafirnz]

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

[@ShikharDadhich]

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

[@yashmittal198]

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

[@MrZeeshantufail]

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.

[@JoeMaddalone]

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."

[@zackmacomber]

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.

[@brycepj1]

Great stuff, Joe! Thanks for putting it together!

[@salasiapro]

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

[@SKDurgesh]

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

[@gunishraichawla]

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 ?

[@JoeMaddalone]

Try these: AngularJS Filters plus some Sublime & Bower tips Introduction to Bower

[@gunishraichawla]

Joe Maddalone Perfect! Thanks!

[@DanHaywood]

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

[@عيسىمحمدعلي-ج6خ]

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 ?

[@gabrielagabi5480]

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

[@RemcoPeggeman]

Yes you can, there are multiple ways to do this. I always use templates and views, so I only place them in the index.html and do some routing (search for routing in angular for more info). You could also create an HTML file with all your scripts and do a ng-include. Ofcourse you would have to import angular itself. Otherwise it won't work.

[@gunishraichawla]

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 ?

[@JoeMaddalone]

Had to recreate it from my own video, but still works just fine. plnkr.co/edit/Ar92D0etGj7f8QoajM3X I also have a video on transclude here: AngularJS Transclude

[@gunishraichawla]

Joe Maddalone The difference is, it no longer works with custom element directives. I forked your example and changed the directive .. have a look. plnkr.co/edit/FuUJRTCXqC0EAbWs2KWC?p=preview

[@JoeMaddalone]

You want to change namer="" to just namer. This is the difference between using the [A]ttribute vs the [E]lement version of the directive.

[@tobiasmucksch9441]

Very useful - and very concise. Thank you!

[@drescore]

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 :)

[@dlodeprojuicer]

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

Very good. Simple and direct.

[@aboel3zz]

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

[@mindlesssingularity]

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

[@SoftDevPhilosophy]

Very helpful! Thanks very much for this tutorial!

[@89ankit89]

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

[@JoeMaddalone]

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

[@warn2571]

@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.

[@MrZeeshantufail]

+Michael Warner no brother there is a big difference in using {} or true. 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.

[@numicago]

This was awesome!!

[@JoeMaddalone]

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.

[@gnanaselvan2010]

@Joe Maddalone "That's really cool explanation"

[@YonathanBenitah]

very clear! Thank you

[@toothpickfactory4720]

Awesome vid. Thank you =)

[@SampathLokuge]

Awesome.Thanks a lot :)

[@xAockd]

Thx for video! Please recording more video about angularjs

[@stofstik]

Awesome :)

[@venki1429]

awesome..

[@meitalv8091]

great !

[@JoeMaddalone]

[@MunzirSuliman]

i luv u mowah , no homo :)