Directive for Route Handling

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 11 years ago
Updated 5 years ago

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

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.

~ 4 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

Be on-Topic

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

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