Write your very first directive! This lesson will show you how to declare a directive, and start using the "link" function to modify the behavior of an HTML element.

https://app.egghead.io/api/v1/lessons/write-your-first-directive/subtitles

Write Your First Directive

[00:00] Your first directive is going to look something like this where you type the module name, you type directive, you type the name of the directive, so "My first directive." Then you type a function which you could inject stuff into. We're not going to do that right now though. Then we'll return a function, which is called the linking function. In there, we'll just log out "Hello."

[00:19] To use this, we'll create a div with an attribute of "my first directive" and this dash case matches up with our camel case here. We could call this without anything or with, it doesn't matter. For right now, we'll just hit Refresh and you can see that it logs out "Hello."

[00:41] From here, we can actually start passing in some of the parameters, the first one being the scope. Since we're inheriting the scope from the scope of our controller, we can get a scope.app.message and log out that same "Hello" message which is declared here.

[00:59] We can refresh and we still get "Hello." Then we can actually grab the element itself. Instead of console log, we can say element text and use the jQuery lite to replace the text of our element. Hit Refresh, and you can see we pull hello up to here.

[01:17] The third parameter is attributes. We can grab some attributes. We'll add attributes message and add that here. In our attributes, we'll say the message is "Mom." We can refresh, and you can see it says, "Hello mom." We have this coming in through here. We're replacing the element text here. Then we're grabbing attributes message which we're passing in through here.

[01:51] Now, this isn't doing too much right now. But the thing you should realize is that you could actually duplicate this as much as you want to make it reusable. When we refresh, you can see that it changes all these elements into the directive that we're using.

[02:08] We can change the message for each of them. We could say Dad, Superman, John, and so on and so forth. You can see that once we change these, it changes that individual element but not the others.

[02:23] Now, I just want to be clear that this isn't a very good example because you could do this much more easily with a template inside of your directive. You typically want to avoid scope inheritance this way. There's much better ways of doing that.

[02:37] But I think it shows that you can access the scope and the element and the attributes, and manipulate and use all of those in a single directive in just a single line of code.

Write Your First Directive

Share this video with your friends