angular.js директива templateUrl не удается связать область

Question

Я создаю директиву, которая будет отображать и показывать контент, прослушивая событие $ routeChangeError на $ rootScope.

Я получил все это работать на встраивание шаблон, как это:

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; 
      }); 
     } 
    }; 
}); 

Но заменить шаблон templateUrl (как я комментировал в данном примере), не работает. Шаблон загружается, но привязка не работает.

В консоли нет ошибок.

Я играл с различными настройками директивы, но не смог заставить его работать. Я подумал, может быть, я должен был требовать ngShow, но когда я пытаюсь что я получаю сообщение об ошибке $ компиляции:

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}}"> 

Я думал, может быть, я должен был использовать параметр области действия, но я не понимаю, как. Я нашел документацию немного запутанной.

Есть ли я на правильном пути?

Answer 1

Я предполагаю, что вы говорите о директиве с изолированной областью. Если это так, у вас нет доступа к переменным области видимости, полученным из родительских областей (ов).

В общем, templateUrl не может интерпретировать инъекции $ rootScope в .directive

Directives.directive ('...', функция ($ rootScope)

Таким образом, вы не можете использовать $ синтаксис rootScope в . ваше мнение Это может только быть сделано, если вы используете шаблон: «...» вместо Смотрите здесь, чтобы освоить эту технику:.

AngularJS evaluate $rootScope variable in directive template

Другой, чем при использовании шаблона: внутри вашей директивы, вы можете вместо вводить $ rootScope в ваш контроллер и зарегистрировать локальную переменную $ scope со значением, которое вы хотите использовать в своем представлении. Будет выглядеть так внутри вашего контроллера:

$ scope.headertype = $ rootScope.currentHeaderType;

Оттуда вы можете использовать заголовок в своем представлении templateUrl. Недостатком этого метода является то, что вы теряете привязку данных с обратной привязкой. Если вам нужна обратная привязка данных, то вы должны получить переменную из атрибута Ань = '

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