AngularJS überschreibt isoliert Richtlinie Anwendungsbereich

Question

Verbrauch:

<my-directive my-var="true"></my-directive> 

Richtlinie:

app.directive('myDirective', [ 
    function() { 
     var definition = { 
      restrict: "E", 
      replace: false, 
      transclude: false, 
      scope: { 
       myVar: '@', 
      }, 
      controller: ['$scope', function($scope) { 
       console.log($scope.myVar); // "true" 
       $scope.myVar = "false"; 
       console.log($scope.myVar); // "false" 

       setTimeout(function() { 
        console.log($scope.myVar); // "true" (!) 
       }, 100); 
      }] 
     }; 

     return definition; 
    } 
]); 

Konsolenausgabe

"true" 
"false" 
"true" 

Was genau ist hier passiert? Die Variable wird als String übergeben ("true"), ich ändere sie, dann wird sie wieder ersetzt? Ich möchte den Zyklus hier verstehen. Liegt das daran, dass ein zusätzlicher Kompilierungs- oder Digest-Zyklus auftritt und alle isolierten Bereichswerte erneut berechnet werden? Ich dachte, dass, einmal gesetzt, Variablen wie folgt (@, nur String in Direktive) bleiben die gleichen?

Gibt es eine Möglichkeit, innerhalb der Direktive zu einem Zeitpunkt zu verbinden, nach dem Zeichenfolge Variablen nicht ersetzt werden, oder wird es immer so mit jedem Digest oder whatnot arbeiten, und ich bin gezwungen, $ watch zu verwenden?

Answer 1

@ bindet den übergeordneten Bereich an den isolierten Bereich, und es ist eine einseitige (nicht einmalige) Bindung. Wenn der äußere Gültigkeitsbereich geändert wird, wird der Wert im isolierenden Gültigkeitsbereich der Richtlinie zurückgesetzt.

Under the covers, Angular ruft attrs.$observe auf dem Elementattribut mit "@" auf. Dies bedeutet, dass eine Beobachterfunktion für den nächsten $ Digest-Zyklus nach der Kompilierung in die Warteschlange gestellt wird. Diese Beobachterfunktion setzt die Gültigkeitsbereichsvariable jedes Mal, wenn sich der dem Attribut zugewiesene interpolierte Wert ändert.

Also, die High-Level-Schritte sind:

1) for `@` scope variable, set an observer function and queue it for later 
2) set `@` scope variable to the interpolated value 
3) run the controller, pre- and post-link functions 
... 
N) observer runs against interpolated value and sets the scope value 

dies also gegeben, können Sie jetzt sehen, warum Ihre Änderung bestehen nicht. Es würde, wenn Sie es nach all diesen Schritten gemacht haben - d. H. Mit einer Zeitüberschreitung oder als Reaktion auf ein Ereignis. Und nur, wenn der interpolierte Attributwert nicht geändert wurde.

Dies ist nicht so mit "=".

Hier ist eine plunker, die die Unterschiede veranschaulicht.

Wenn Sie eine einmalige Passage von Variablen wollen, setzen Sie einfach den Umfang Variable ein Attribut in der Link-Funktion oder den Controller

scope.myVar = $attrs["my-var"]; 

und entfernen myVar vom Anwendungsbereich.