This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay
    This lesson is outdated. Click here to find out about changes you should be aware of.

    Directive for Route Handling

    John LindquistJohn Lindquist

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss