Analyse von Bindungsstrategiebeispielen in AngularJS-Direktiven

Die Beispiele in diesem Artikel beschreiben die Bindungsstrategie in AngularJS-Direktiven. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Im vorherigen Artikel wissen wir, wie die Anweisung einen unabhängigen Bereich generiert. In diesem Abschnitt werden wir uns die Bindungsstrategie genauer ansehen der Umfang.

Im Allgemeinen werden Bereichsbindungsstrategien in drei Typen unterteilt:

(1) @: Bindungszeichenfolge

(2) =: mit dem übergeordneten Controller Zwei-Wege-Bindung

(3)&: Wird zum Aufrufen von Funktionen im übergeordneten Bereich verwendet

1. Grundlegende Methode

<test word="{{wordCtrl}}"></test>

app.controller('myController1',['$scope',function($scope){
    $scope.wordCtrl="hello";
}]);
app.directive('test',function(){
    return{
     restrict:'E',
     template:"<div>{{word}}</div>",
     link:function(scope,ele,attr){
      scope.word=attr.word;
     }
    }
});

Anzeigeeffekt:

Dies ist die grundlegendste Methode, die die Bindung von Zeichenfolgen im Gültigkeitsbereich implementiert

2 Tatsächlich können wir die obige Methode umschreiben

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      word:'@'
     },
     template:"<div>{{word}}</div>",
    }
});

Sie können die Link-Funktion löschen und @binding hinzufügen, sodass die Zeichenfolgenbindung zwischen den Attributen in der Anweisung und dem Anweisungsbereich erfolgreich erreicht werden kann.

3.'='binding

Wenn Sie = binding verwenden, können Sie nicht nur den Wert im Umfang der Anweisung ändern, sondern auch den Wert im übergeordneten Controller ändern, um zwei zu erreichen -Wege-Bindung.

Beispiel:

   ctrl:
   

<test word="{{wordCtrl}}"></test>

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      word:'@'
     },
     template:"directive:<input ng-model=&#39;word&#39; />",
    }
});

Der Effekt besteht darin, den Umfang im zu ändern Befehl Der Wert ändert auch den Wert der entsprechenden Variablen im Controller, wodurch eine bidirektionale Bindung zwischen dem Controller und dem Bereich in der Anweisung realisiert wird.

Der Effekt ist wie folgt:

3.'&'Methode

<test greet="sayHello()"></test>

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      greet:'&'
     },
     template:"<div ng-click=&#39;sayHello({name:&#39;yuxiaoliang&#39;})&#39;>点击说HELLO</div>",
    }
});

Achten Sie auf die Art der Parameterübergabe.

Ich hoffe, dass dieser Artikel für alle in der AngularJS-Programmierung hilfreich sein wird.

Weitere verwandte Artikel zur Analyse von Bindungsstrategiebeispielen in AngularJS-Anweisungen finden Sie auf der chinesischen PHP-Website!