Name: Directive for Route Handling
Uploaded: 2013-08-31T21:21:15-05:00
Description: Use AngularJS $rootScope within a directive to detect route change errors and display it to the user.

Use AngularJS $rootScope within a directive to detect route change errors and display it to the user.

Directive for Route Handling

**John Lindquist**: An alternative way of handling this route change error is by displaying it in the UI. We can do that by setting up, let's call this directive error, and then we'll pass in the rootScope here. Now, the only reason I can pass in that I'm allowing myself to do this, typically, it's a code smell to pass in something like rootScope into a directive but, in this case, we're going to be listening to an event that is an angular event.

Whatever module you use this in, it's still going to work. You can basically do a gut check and say, "Is this directive going to work if I pull it out and use it in another module?" If it is, then it's probably OK to inject something like rootScope. If it's not, please reconsider acting upon your directives instead of injecting business into them.

So, moving right along, I want to say this is an element. We'll set up a template for it, which is just going to be a DIV with a class of alert box. Alert box is a nice foundation component. We'll just say error, and then the last thing we'll just say, ngShow. We'll only show this alert box if error is true.

Basically, in our linking function, all we have to do, pass in the scope as you normally do. We'll grab this rootScope listener that we have down here. We'll use the exact same code. Instead of just logging out the event, we will say scope is error, is true. That's going to allow "this is error" to map to "this is error" over here. The last thing we have to do is just drop our new error component inside of our code here.

Once we refresh, you can see we get a nice alert box error at the top saying that something has happened. You could add something to your template as far as having them redirect somewhere else or using the location, which we haven't really talked about yet, or display anything from the error like the rejection message.

Let's just prove that this won't show up if the app actually works. So you can see I refresh now, that component didn't show up because ngShow is false. Basically, that's all it is. Just to reiterate, be very careful if you're going to use something like rootScope inside of a directive. Make sure it's using an angular event, so it's more of a convenience component versus a component that's kind of messing up any sort of route logic or dropping properties on the route scope, things like that.

That's that. We'll move on to other routing events in the next video.

Directive for Route Handling

Share this video with your friends