Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Write Your First Directive

2:46 Angular 1.x lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Simona

Ok, I heard you saying 'this is not a good way of writing directives, it's just to show you etc. etc.', and I cannot find in any other post how to write a god directive. That sound very strange to me, it is a central argument in angular, and nowhere I can find it...

In reply to egghead.io

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

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

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.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?