AngularJS Directives Tutorial - Part 1 - Demystifying Angular Directives

Key Takeaways

okay so in my last video uh I gave an intro to angularjs and developing a single page application with it I'm going to throw a link here in the in the description and probably an annotation somewhere around here uh if you're not on mobile you'll see that and so in this one we're going to get into angular's most confusing yet most powerful feature and that is directives lots of people directives are kind of a black box to them like I kind of see it but it seems kind of confusing so we're going to just kind of in this is a lesson all to its own because directives are quite a quite a bit of stuff but at the end of the day you're going to find out they're not that confusing so let me kind of give you the premise of where it comes from let's say we've got this controller here and we're just kind of importing friends we got our friends list here and our friends Json so this is our friends uh HTML templating things so let's say for each friend we wanted to you know start adding some stuff and we're going to add our friend first name friend last name what else do we have in here friend age and tweets let's go span there we go so now we've kind of got that um and it's in an NG repeat uh but let's say we want to break this out into something more reusable that we don't have to it's reusable now cuz it's in an NG repeat but say we're going to use this thing all over the place might not be used in an NG repeat if I click on this friend then I want to reuse all the same code there just for the individual person uh what's actually going to make more sense is to make a directive in a lot of ways um or you can do an NG include template but in this case we'll just use a directive so we're going to make a directive called contact card um and so what I've done is I've Dei def defined an HTML 5 Element some of you guys really don't like calling things that so what you can do is you can just do a div like if you're not building a dedicated HTML 5 app you can do a div with an attribute of contact card and that will also work or if that if you guys are still wanting to be more compliant you can do data contact card um and support official HTML 5 data types since I like for it to feel cool I'm going to call it contact card there and we're going to move on and now you see we have nothing so let's go ahead and create our contact card directive going to create a new one and I'm going to call this one app. directives contact card this is just my module name this could be whatever you want it has no dependencies I'm going to go ahead and save you directives so now I've got my directives contact card let's go ahead and add that to to my build where all those things coming in right here add that to all my JavaScript build however you get it on the page is up to you okay so now it's in there and in my app I'm going to add this as a dependency uh for my app loading up and what did I call that I call that app. directives do contact card there we go so now it's going to require that to be loaded before the app boots up and still good don't think I have JavaScript errors nope we're good all right sweet so let's go ahead and build out this directive so when we have added contact card it is going to start looking for a directive called contact card except for it won't be looking for it hyphen space they be for it camel space so I'm going to go directive and I'm going to call it contact card like that so what angular is going to do is it's automatically smart enough to translate it from the hyphenated version to the camel cased version so I'm creating directive contact card and then I'm doing a function which is dependency injected so if I want to have this require any services or whatever this is a dependency injected function you know I can require my friend's Service uh which I did from my previous video uh you know I can require scope any of that stuff actually can't there's really no scope needed at this point um and what we're going to return is an object and that object is our directive the first thing we're going to get into is let's go restrict e so that way this thing can only be instantiated by using an element that's if I did restrict e that's this if I did restrict a that's attribute that's when I did div um contact card that will also work on data contact card so that's kind of what the restrict is about uh that's just so you can you know it's more or less for self-documenting purposes um I'm only going to call this thing as an element or as an attribute so you kind of know what to look for in your code I'm just going to say restrict e since I'm calling it as e here let's go on to our next thing and I'm going to go straight to controller controller is also dependency injected you can add whatever you want in here I can add in my scope um and I'm just going to have this thing do a alert so we know that this thing's firing there you go it alerts controller so we know that the controller is firing it fired twice because I'm doing an inine repeat for my two friends so the controller is already active I can have this do a console log of um controller there you go so it logged twice so our controller is working it's linking it's firing if you're not getting that to work either this name is not matching this name here um you're not defining it in the right way that it's restricting to or possibly you'll get an error here if you've not included the directive JavaScript on the page and the common thing that I do all the time is I forget to add my module my directive module as a dependency so it's loading but it's not loading in time uh or it's not requiring it to load before it goes in processes this templating that's usually the mistake that I make is I go ahead I I add the Javascript file I add the directive file uh but I forget to make it a dependency so you don't get any errors at that point because it's just saying hey we don't know what contact card is move on um so just make sure that you've added it in your app dependency whatever your module name is which is right there so just figured I'd reiterate that that's the kind of thing I did about 20 times when I was first making directives because you just don't get error about it takes you a while to figure out what's going on so let's say I want to pass some information into this directive um how am I going to do that uh the biggest way you'll do that is through attributes I'm going to say data equals and I can pass it in any kind of anything in this case I'll just call it friend which is coming from up here so it's basically taking anything from my current scope and it's passing it in through an attribute and now we can access this through scope and the scope op object I can grab um data is and I do equal and that is going to look for an attribute called Data so that's going to say data is equal and I can go grab data so now scope data in my controller I can go will be my friend for each person let me just refollow that again just in case I didn't explain it super well I'm passing in the friend object to the data attribute data is looking for the data attribute let's say I wanted this to be called something else um my data but I still want to look to the data attribute I can do that and that didn't work why didn't that work I don't know I usually keep it named the same thing honestly because it just gets really confusing honestly if I was doing this I would call it friend and then I would call this thing friend cuz it really helps to keep the naming conventions always the same you'll get stuff really confused all the time oh that's what it is I'm console logging scope data I did it right my data data back to example number one so I'm still calling it data here now I'm going to call it my data in here for whatever reason because I want to confuse myself and everybody watching and it still works so bad way to do it but that's kind of how you can faga with the stuff I'm going to for the sake of Simplicity call it friend and I'm going to call it friend and we're just going to keep everything similar okay and there's a couple things equals means it's The Binding is going both ways um and there's some other binding characters you can pass in instead of equals uh you can make the binding just go one way or you can make the binding go two ways you can look at the angular docks for that uh the majority of time you're just going to want to go equals so that way if you go changing your friend here it's going to fly back up the chain and it's going to change it in the controller uh for your home controller usually that's what you want to do you want it to always be bound both ways still so so there's my controller now I can add my own template and I can go H1 friend. first name make sure I have my comma there you go so now I've got my own templating going on that's really we're going to want to use a template URL just like we do for everything else so I will go templates um directives and then this was what is this contact card contact card. HTML let's go make that directives contact card HTML so now I can take that templating that I had I think I already erased it didn't I yep okay we'll just go H1 and now we're working again so now I've kind of got this is my directive that matches up to my actual directive JS so now I can start building my reusable code we've kind of gone through the whole steps that we need to take so now this thing is completely reusable I've got my directive it's going through the controller uh let me kind of show you some other things and now my HTML looks super clean and actually it's super it really makes a lot of sense actually one thing that I like about if you're using an HTML 5 only app uh being able to Define stuff like this really kind of makes it really clear and self-documenting you know exactly what's going on so that's kind of how that works let's go and go through some options that we can use here so let's say we want to add some HTML into our directive declaration uh let's say I want to add my own H1 and even do some scoping stuff here um you'll notice that doesn't show up if I had hyphens or whatever nothing's showing up because by default anything in this directive gets completely deleted so if you want to pull that in then you use the transclude true flag and it still doesn't get pulled in because it doesn't know where to transclude it because you already have your template so what you're going to do in your template is you're going to add any kind of element and you're going to add the NG transclude attribute and there you go now before my friend name gets printed and I'll change this to H2 uh now before my friend name gets printed it's going to transclude so I can put this at the bottom and that automatically gets put below now every time so that's kind of where that comes in uh if you want to be able to custom tweak some part of your contact card every time you declare it that's how you would do that that another way you can add custom tweaking is uh you can add your own attributes uh let's let's say that H1 won't always be called contact card I can make sure that title's called Contact there and let's just that'll be called title and then I'm going to pull in title as well here so now scope. tile is going to be called and I need to make sure that this is a a defined as a string there we go because uh you'll notice all these attributes are getting looked at as evaluated objects so this isn't a string of friend anymore it's looking for an object called friend so this did not work at first because it was looking for an object object called capital c contact uh so I have to make sure I wrap it in string quotes and so now I can instantiate it with a different title every time um real time or I can pass it in you know an object so that's kind of where that comes in let's go back to my directive so we've got our restrict we've got our scope this is how we pull stuff in based off of attributes we got our transclude equals true that's if we want to pull some stuff in I don't really need that anymore we've got a replace option let's go look at the Dom element that's getting created here you'll notice our Dom element is still called contact card I don't really want that I want to call this thing I I want to make sure that this stays as a div keep it a little bit more compliant you can go replace true and this will fail should give me an error now yeah it's going to give me an error right now because you have to have at least one root element if you're going to do this so I'm going to go to my contact card HTML I'm going to make sure I wrap everything in a div and so now now instead of contact card being the element for that it's going to be called div there we go so now if I inspect this over here now instead of my element being called contact card it's called div so I usually do that just kind of as a safe measure um and that way I can still use my HTML 5 elements as much as I want uh for clarity uh and then they'll get substituted out for a more compliant div so that's something I'll do kind of always use replace and then honestly this is about as complicated as stuff gets once again this controller is dependency injected so you can insert anything you want to you can uh do an interval so you can pull in any of your dependency injected values and that'll all work this is dependency injected as well um and let's do the link function and that's probably about all you need to know to write a whole lot of directives uh there's also a compile function which you probably won't need to know unless you're doing some complicated stuff let's say that we wanted to do some stuff to this Dom element we wanted to bind and listen to Dom events at that point we'd add a link function Now link function is not dependency injected you're going to get three um you're going to get three arguments here you're going to get the scope so a common thing is to not add a dollar sign there so you know that this is actually just getting past as the first argument all the time you're not dependency injecting it second one is elements and the third one is attributes so if I go here I'm always going to get uh the scope I'm going to get my J query element if you're running jQuery it's automatically going to be wrapped as a jQuery element if not you're going to be getting the jQuery light angular version uh and then the attributes so what you can do here is I can go make sure I have this so now whenever I click my elements it's going to alert click and so that's kind of if you want to make your directive do some smarts stuff that's going to be where you do that um you can also get the ID of your element that way if you're not using jQuery it passes you your attributes um so I can automatically get my attribute ID attribute from here which is not defined I'll just make this the index since we're doing an NG repeat and that's always calling an index uh because it's a directive I don't exactly remember how to do that I haven't done it in a while but uh that's pretty much it that's how you use a link of if you need to do any Dom manipulation so hopefully that helps you understand directives let's kind of recap real quick uh restrict this is for how you're pulling it in scope this is for where stuff's coming from uh this is how you get all your data in these can be objects these can be values you define Real Time with strings uh they can be as complicated as you want them to be and then controller you're defining your own controller here uh you could give this its own controller name or it's usually you want to find the controller right here pull your templating url that's about it directives are not really that complicated once you get past building your first one or two hope you enjoyed this tutorial and have a great day