angular.js directive templateUrl fails to bind scope

Question

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.directive("alert", function ($rootScope) {
    'use strict';
    return {
        restrict: "E",
        replace: true,
        template: '<div class="alert alert-warning alert-dismissable" ng-show="isError">'
            + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'
            + '{{ message }}'
            + '</div>',
        //templateUrl: 'views/alert.html',
        link: function (scope) {
            $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
                scope.isError = true;
                scope.message = rejection;
            });
        }
    };
});

But replacing the template with templateUrl (as I have commented out in the example), doesn't work. The template loads, but the binding doesn't seem to be functioning.

There are no errors in the console.

I've played around with various directive settings, but haven't succeeded in getting it to work. I figured maybe I had to require ngShow, but when I try that I get a $compile error:

Error: [$compile:ctreq] http://errors.angularjs.org/undefined/$compile/ctreq?    p0=ngShow&p1=ngShow
    at Error (<anonymous>)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:6:453
    at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:46:477)
    at S (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:49:341)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:55:213
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:66:72
    at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:91:121)
    at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:91:121)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:92:288
    at g.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:100:198) <div class="alert alert-warning alert-dismissable ng-binding" ng-show="{{isError}}">

I thought maybe I had to use the scope setting, but I don't understand how. I found the documentation is a little confusing.

Am I on the right track?

Answer 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