angular.js 指令 templateUrl 无法绑定范围 [英] angular.js directive templateUrl fails to bind scope
问题描述
我正在创建一个指令，该指令将通过侦听 $rootScope 上的 $routeChangeError 事件来显示和显示内容.
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">×</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 替换模板(正如我在示例中注释的那样)，不起作用.模板加载，但绑定似乎不起作用.
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.
控制台中没有错误.
我尝试了各种指令设置，但没有成功使其工作.我想也许我必须需要 ngShow，但是当我尝试时，我收到了 $compile 错误:
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.
我在正确的轨道上吗?
推荐答案
我假设您正在谈论具有独立作用域的指令.如果是这样，您将无权访问从父作用域派生的作用域变量.
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).
一般来说，templateUrl 无法将 $rootScope 注入解释为 .directive
In general, templateUrl cannot interpret the $rootScope injection into .directive
Directives.directive('...', function($rootScope)
Directives.directive('...', function($rootScope)
因此您不能在视图中使用 $rootScope 语法.这只能在您使用 template: '...' 时完成.请参阅此处以掌握此技术:
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 评估指令模板中的 $rootScope 变量
除了使用模板:在您的指令中，您还可以将 $rootScope 注入控制器，并使用要在视图中使用的值注册一个本地 $scope 变量.在您的控制器中看起来像这样:
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;
$scope.headertype = $rootScope.currentHeaderType;
从那里，你可以在你的 templateUrl 视图中使用 headertype.这种技术的缺点是你失去了反向数据绑定.如果需要反向数据绑定，则必须从="属性中派生变量
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
这篇关于angular.js 指令 templateUrl 无法绑定范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
