javascript – angular.js指令templateUrl无法绑定范围

2023年2月7日 194次阅读

我正在创建一个指令,通过监听$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">&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}}">

我想也许我不得不使用范围设置,但我不明白如何.我发现文档有点令人困惑.

我是在正确的轨道上吗？

最佳答案 我假设你正在谈论具有孤立范围的指令.如果是这样,您无权访问从父作用域派生的作用域变量.

通常,templateUrl无法将$rootScope注入解释为.directive

Directives.directive(‘…’,函数($rootScope)

因此,您无法在视图中使用$rootScope语法.只有使用模板才能执行此操作：’…’.看到这里掌握这种技术：

AngularJS evaluate $rootScope variable in directive template

除了使用模板：在指令内部,您可以将$rootScope注入控制器并使用您要在视图中使用的值注册本地$scope变量.看起来像你的控制器内部：

$scope.headertype = $rootScope.currentHeaderType;

从那里,您可以在templateUrl视图中使用headertype.此技术的缺点是您松散了反向数据绑定.如果需要反向数据绑定,则必须从’=’属性派生变量

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

点赞