AngularJS - Почему моя переменная с выделенной областью видимости - undefined?

У меня есть следующий плункер:

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

Когда я запускаю это, templateUrl undefined в области. Почему?

Мое предположение заключается в том, что он пытается найти переменную с именем 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
        }
    }
});

Ответы

Ответ 1

Просто измените область действия:

    scope: {
        templateUrl: "@"
    },

вы получите выход "template.html".

Ключевым моментом является различие между '=' и '@'. Вы можете обратиться к https://docs.angularjs.org/guide/directive.

Ответ 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
        }
    }
});

Ответ 3

Когда вы будете использовать знак равенства (=) в директиве, вы должны определить это свойство в области $scope, иначе это не сработает, оно вызовет ошибку ''. см. документ angular . можете ли вы попробовать templateUrl: "=?" или под $scope.

Согласно документу angular

<!-- 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