AngularJS - Warum ist meine Direktive isolated scope variable nicht definiert?

Ich habe folgendes Plunker:AngularJS - Warum ist meine Direktive isolated scope variable nicht definiert?

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

Als ich dies ausführen, wird templateUrl im Rahmen nicht definiert. Warum?

Meine Annahme hier ist, dass es versucht, eine Variable mit dem Namen template.html im übergeordneten Bereich zu finden, kann aber nicht, also es zu undefiniert zuweisen. Wenn ja, wie gebe ich dies als String statt als Scope-Variable ein?

Html:

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

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 
     } 
    } 
});

Quelle

2014-09-11 Scottie

einfach den Umfang ändern:

scope: { 
     templateUrl: "@" 
    },

Sie den Ausgang 'template.html' bekommen.

Der entscheidende Punkt ist der Unterschied zwischen '=' und '@'. Sie können sich auf https://docs.angularjs.org/guide/directive beziehen.

Quelle

2014-09-11 02:18:43 creeper

Die API der Direktive wurde nach $ compile verschoben [https://docs.angularjs.org/api/ng/service/$compile] –

Ausgezeichnete Antwort, die den Unterschied im Detail erklärt: http://stackoverflow.com/a/14063373/3123195 –

dachte ich, mein Problem heraus. Ich muss @ anstelle von = verwenden.

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 
     } 
    } 
});

Quelle

2014-09-11 02:11:31 Scottie

Wenn Sie Gleichheitszeichen (=) in Direktive verwenden, müssen Sie diese Eigenschaft unter dem $ scope definieren, andernfalls funktioniert es nicht. Es wird der Fehler '' erzeugt. siehe das eckige Dokument link. ob Sie templateUrl ausprobieren können: "=?" oder unter dem $ scope.

Nach Winkel Dokument

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

diesen Fehler zu beheben, immer Pfadausdrücke mit Bereichseigenschaften verwenden, die Zwei-Wege-dagetenbundenen:

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

Ihre Lösung ist hier plnkr

Quelle

2014-09-11 03:14:49 Shohel

AngularJS - Warum ist meine Direktive isolated scope variable nicht definiert?

Antwort

Verwandte Themen