我正在创建一个指令,该指令将通过侦听 $rootScope 上的 $routeChangeError 事件来显示和显示内容。
我通过像这样内联模板来完成所有工作:
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">×</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}}">
我想也许我必须使用范围设置,但我不明白如何。我发现文档有点混乱。
我在正确的轨道上吗?