Useful Behaviors

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 11 years ago
Updated 5 years ago

When you define a directive you get access to the attrs object by declaring it as a dependency in the link function. The attrs object will contain the normalized attributes and their corresponding values declared on the element which contains the directive in the html. So if you set a value on your directive attribute (myDirective="value"), you can access this value in your directive configuration by accessing attrs.myDirective, as this contains the value set in the html for myDirective.

John Lindquist: Now that we have our basic behaviors set up, let's make them do something a bit more useful. When you roll-over or mouse-enter this, we're going to element, add class. Again, this is part of the jQuery lite library that is included with AngularJS. jQuery itself is not included, but there is this version that does some of the basic features of JQuery...and remove class panel.

These panel classes are included in this foundation library that I'm using. You can find it online or play with it in the included code beneath the video.

I'm going to add the panel class or I'm going to...on mouse-out, I will remove the panel class. Now when I roll-over, it's going to add a panel, the class of panel, which adds that gray thing around it. When I roll-out, it's going to remove that class. In, out, in out.

Now what you really want to be able to do to make this a reusable component, a reusable behavior, is to extract this so that instead of defining inside the directive itself, you can define it inside the HTML. So we can say, on enter, panel, and from there, we can go in here and say, the third parameter here is "attrs" for attributes. We can say, attributes and the attributes of enter. So this maps to this, and so it looks up whatever you put in here.

There's some more advanced stuff we can do, but right now, we'll keep it simple.

In here, we'll say, remove class, attributes, enter. We actually need to add this to, here's where. So now, this is going to do the same thing. Let me just break it so you can see it, it's not magical. I always like to break things so you can see that I didn't do something weird.

Now, it's back to working and when I roll-over and roll-out, you can see that it's adding and removing the panel class. Again, the panel class isn't defined anywhere inside of here. It's defined here, which makes using directives really, really cool.

egghead
egghead
~ 20 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today