Angular.js Directive Templateurl Fails To Bind Scope

I'm creating a directive that will display and show content by listening to the $routeChangeError event on $rootScope. I got it all to work by inlining the template like this: app.

Solution 1:

I am assuming your are talking about a directive with isolated scope. If so, you don't have access to scope variables derived from the parent scope(s).

In general, templateUrl cannot interpret the $rootScope injection into .directive

Directives.directive('...', function($rootScope)

So you can't use $rootScope syntax in your view. This can only can be done if you use template: '...' instead. See here to master this technique:

AngularJS evaluate $rootScope variable in directive template

Other than using template: inside of your directive, you can instead inject $rootScope into your controller and register a local $scope variable with the value you want to use in your view. Would look like this inside of your controller:

$scope.headertype = $rootScope.currentHeaderType;

From there, you can use headertype inside your templateUrl view.The downside of this technique is that you loose reverse data binding. If you need reverse data binding, then you must derive the variable from an '=' attribute

plnkr = http://mle.mymiddleearth.com/files/2013/07/aint-nobody-got-time-for-that.png