Директива angular.js templateUrl не может связать область

Я создаю директиву, которая будет отображать и показывать контент, прослушивая событие $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, но когда я пытаюсь это сделать, я получаю ошибку $ compile:

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

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

Я на правильном пути?


javascript angularjs angularjs-directive angular-template angularjs-scope
person Tom Erik Støwer    schedule 14.11.2013    source источник
comment
Не могли бы вы предоставить скрипку?   -  person artur grzesiak    schedule 14.11.2013
comment
(jsfiddle.net/wq35d/1) - я не очень хорошо знаком с работой angular в jsFiddle, поэтому этот пример не запускается, возможно, вы могли бы это исправить. Также я не уверен, что правильно передаю $routeChangeError (в моем проекте он срабатывает после неудачного разрешения маршрута).   -  person Tom Erik Støwer    schedule 14.11.2013
comment
Я обновил вашу скрипту, так что она работает: jsfiddle.net/wq35d/3 Посмотрите и посмотрите, сможете ли вы настроить его, чтобы воспроизвести вашу проблему, или, возможно, это даст вам некоторое представление.   -  person KayakDave    schedule 14.11.2013
comment
Спасибо, я исправил трансляцию события, поэтому сообщение теперь тоже работает: jsfiddle.net/wq35d/4 . Я не могу воспроизвести ошибку, хотя...   -  person Tom Erik Støwer    schedule 15.11.2013

Ответы (1)


arrow_upward
3
arrow_downward

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

Как правило, templateUrl не может интерпретировать внедрение $rootScope в .directive.

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

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

AngularJS оценивает переменную $rootScope в шаблоне директивы

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

$scope.headertype = $rootScope.currentHeaderType;

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

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

person Benjamin McFerren    schedule 16.11.2013
comment
не могли бы вы предоставить скрипку? - person WebWanderer; 24.07.2014