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">&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模板（如我在这个例子都注释掉），不能正常工作。模板负荷，但结合似乎并没有正常运行。

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.

我曾与各种指令设置左右出场，但都没有成功地得到它的工作。我想也许我不得不要求ngShow，但是当我尝试，我得到一个$编译错误：

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.

我在正确的轨道上吗？

推荐答案

我假设你正在谈论孤立范围指令。如果是这样，你没有访问来自父作用域（S）导出范围变量。

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不能跨preT的$ rootScope注入.directive

In general, templateUrl cannot interpret the $rootScope injection into .directive

Directives.directive（'...'，函数（$ rootScope）

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

所以，在你看来，你不能使用$ 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:

<一个href=\"http://stackoverflow.com/questions/15434264/angularjs-evaluate-rootscope-variable-in-directive-template\">AngularJS在指令模板评估$ rootScope变量

AngularJS evaluate $rootScope variable in directive template

除了使用模板：您的指令内，可以改为注入$ rootScope到控制器并注册您希望在视图中使用值的局部范围$变量。是这样的控制器内：

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;

从那里，你可以使用headertype这种技术你templateUrl view.The里面的缺点是，你松散逆向数据绑定。如果你需要扭转的数据绑定，则必须从'='属性派生变量

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屋！