Useful Behaviors

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.