Heim > Web-Frontend > js-Tutorial > Hauptteil

Analyse von Bindungsstrategiebeispielen in AngularJS-Direktiven

高洛峰
Freigeben: 2016-12-24 09:51:25
Original
1041 Leute haben es durchsucht

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>
Nach dem Login kopieren

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

Anzeigeeffekt:

Analyse von Bindungsstrategiebeispielen in AngularJS-Direktiven

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(&#39;test&#39;,function(){
    return{
     restrict:&#39;E&#39;,
     scope:{
      word:&#39;@&#39;
     },
     template:"<div>{{word}}</div>",
    }
});
Nach dem Login kopieren

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>
Nach dem Login kopieren

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


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:

Analyse von Bindungsstrategiebeispielen in AngularJS-Direktiven

3.'&'Methode

<test greet="sayHello()"></test>
Nach dem Login kopieren


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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage