Question

我有以下的plunker：

http://plnkr.co/edit/7YUpQ1tEjnUaX01txFcK?p=preview

当我运行它时，范围内未定义templateUrl。为什么呢？

我的假设是，它试图在父作用域中找到名为template.html的变量，但不能，因此它将其分配给undefined。如果是这样，我如何将其作为字符串而不是范围变量传递？

HTML：

<body ng-app="myApp">  
   <div ng-controller="TestCtrl">
      <test-directive ng-model="testModel" 
                      template-url="template.html">
      </test-directive>
   </div>
</body>

的.js

var app = angular.module("myApp", []);

app.controller("TestCtrl", function($scope) {
  $scope.testModel = {}
});

app.directive("testDirective", function () {
    return {
        restrict: 'E',
        scope: {
            model: "=ngModel",
            templateUrl: "="
        },
        template: "<div ng-include='templateUrl'></div>",
        link: function (scope, element, attrs) {
           console.log(scope.templateUrl);  // <-- Shows as undefined
        }
    }
});

Answer 1

只需更改范围：

    scope: {
        templateUrl: "@"
    },

你会得到输出'template.html'。

关键是'='和'@'之间的区别。您可以参考https://docs.angularjs.org/guide/directive。

Answer 2

我发现了我的问题。我需要使用@而不是=。

app.directive("testDirective", function () {
    return {
        restrict: 'E',
        scope: {
            model: "=ngModel",
            templateUrl: "@"
        },
        template: "<div ng-include='templateUrl'></div>",
        link: function (scope, element, attrs) {
           console.log(scope.templateUrl);  // <-- Works perfectly
        }
    }
});

Answer 3

当你在指令中使用等号（=）时，你必须在$ scope下定义这个属性，否则它不起作用，它会产生错误''。见角度文件link。你是否可以尝试templateUrl：“=？”或在$ scope范围内。

根据角度文件

<!-- ERROR because `1+2=localValue` is an invalid statement -->
<my-directive bind="1+2">

<!-- ERROR because `myFn()=localValue` is an invalid statement -->
<my-directive bind="myFn()">

<!-- ERROR because attribute bind wasn't provided -->
<my-directive>

要解决此错误，请始终使用具有双向数据绑定范围属性的路径表达式：

<my-directive bind="some.property">
<my-directive bind="some[3]['property']">

您的解决方案在plnkr

AngularJS - 为什么我的指令隔离范围变量未定义？

3 个答案: