Verwendung der Symbole '@', '&', '=' und '>' im Geltungsbereich der benutzerdefinierten Anweisung: AngularJS

Question

Ich habe viel über die Verwendung dieser Symbole bei der Implementierung von benutzerdefinierten Anweisungen in AngularJS gelesen, aber das Konzept ist mir immer noch nicht klar. Ich meine, Was bedeutet es, wenn ich einen der Bereichswerte in der benutzerdefinierten Anweisung verwende?

var mainApp = angular.module("mainApp", []); 
 
mainApp.directive('modalView',function(){ 
 
    return{ 
 
    restrict:'E', 
 
    scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true 
 
    } 
 
});

Was genau tun wir mit dem Umfang hier?

Ich bin auch nicht sicher, ob "scope: '>'" in der offiziellen Dokumentation existiert oder nicht. Es wurde in meinem Projekt verwendet.

Bearbeiten-1

Die Verwendung von "scope: '>'" war ein Problem in meinem Projekt und es wird behoben.

Answer 1

In einer AngularJS-Direktive ermöglicht der Bereich den Zugriff auf die Daten in den Attributen des Elements, auf das die Direktive angewendet wird.

Dies zeigt sich am besten mit einem Beispiel:

<div my-customer name="Customer XYZ"></div> 

und die Richtlinie Definition:

angular.module('myModule', []) 
.directive('myCustomer', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     customerName: '@name' 
    }, 
    controllerAs: 'vm', 
    bindToController: true, 
    controller: ['$http', function($http) { 
     var vm = this; 

     vm.doStuff = function(pane) { 
     console.log(vm.customerName); 
     }; 
    }], 
    link: function(scope, element, attrs) { 
     console.log(scope.customerName); 
    } 
    }; 
}); 

Wenn die scope Eigenschaft der Richtlinie verwendet wird, in der so genannten "isolierten Umfang" -Modus ist, Das heißt, es kann nicht direkt auf den Bereich des übergeordneten Controllers zugreifen.

In sehr einfachen Worten, die Bedeutung der Bindungs ​​Symbole ist:

someObject: '=' (Zwei-Wege-Datenbindung)

someString: '@' (direkt oder durch Interpolation mit Doppel geschweiften Klammern Notation bestanden {{}})

someExpression: '&' (z. B.hideDialog())

Diese Information ist in der AngularJS directive documentation page vorhanden, obwohl etwas über die Seite verteilt.

Das Symbol > ist nicht Teil der Syntax.

Jedoch existiert < als Teil der AngularJS component bindings und bedeutet Einwegbindung.

Answer 2

> ist nicht in der Dokumentation.

< ist für Einwegbindung.

@ Bindung ist für das Passieren von Strings. Diese Zeichenfolgen unterstützen {{}} Ausdrücke für interpolierte Werte.

= Bindung ist für Zwei-Wege-Modell verbindlich. Das Modell im übergeordneten Bereich ist mit dem Modell im isolierten Bereich der Richtlinie verknüpft.

& Die Bindung dient dazu, eine Methode in den Anwendungsbereich Ihrer Richtlinie zu übernehmen, damit sie in Ihrer Richtlinie aufgerufen werden kann.

Wenn wir scope: true in der Direktive setzen, wird Angular js einen neuen Anwendungsbereich für diese Direktive schaffen. Das bedeutet, dass Änderungen, die am Umfang der Richtlinie vorgenommen werden, nicht im übergeordneten Controller widergespiegelt werden.

Answer 3

Die AngularJS documentation on directives ist ziemlich gut geschrieben, was die Symbole bedeuten.

Um klar zu sein, können Sie nicht nur

scope: '@' 

in einer Richtlinie Definition haben. Sie müssen Eigenschaften haben, für die diese Bindungen gelten, wie in:

scope: { 
    myProperty: '@' 
} 

empfehle ich Ihnen sehr die Dokumentation und die Tutorials auf der Website zu lesen. Es gibt viel mehr Informationen, die Sie über isolierte Bereiche und andere Themen wissen müssen.

Hier ist ein direktes Zitat aus der oben verlinkten Seite in Bezug auf die Werte von scope:

Der Umfang Eigenschaft wahr sein kann, ein Objekt oder ein falsy Wert:

• falsy: Für die Richtlinie wird kein Bereich erstellt. Die Richtlinie wird den Bereich ihrer Eltern verwenden.

• true: Ein neuer untergeordneter Bereich, der prototypisch von seinem übergeordneten Element erbt, wird für das Element der Anweisung erstellt. Wenn mehrere Direktiven für dasselbe Element einen neuen Bereich anfordern, wird nur ein neuer Bereich erstellt. Die neue Bereichsregel gilt nicht für den Stamm der Vorlage, da der Stamm der Vorlage immer einen neuen Bereich erhält.

• {...}(ein Objekt hash): Ein neuer „isoliert“ Anwendungsbereich wird für die Richtlinie des Element geschaffen. Der Bereich 'Isolieren' unterscheidet sich insofern vom normalen Gültigkeitsbereich, als er nicht prototypisch von seinem übergeordneten Bereich erbt. Dies ist nützlich beim Erstellen wiederverwendbarer Komponenten, die nicht versehentlich Daten im übergeordneten Bereich lesen oder ändern sollen.

^{Abgerufen 2017.02.13 von https://code.angularjs.org/1.4.11/docs/api/ng/service/ konnte in isolierten UMFANG $ # -scope-, lizenzierte als CC-by-SA 3.0}

Answer 4

Wenn wir einen Kunden-Richtlinie zu erstellen, der Anwendungsbereich der Richtlinie kompilieren Es bedeutet, dass die Richtlinie nicht mit dem für die Verarbeitung Verantwortlichen übereinstimmt. Sowohl die Direktive als auch der Controller haben ihren eigenen Geltungsbereich. Daten können jedoch auf drei verschiedene Arten an den Anwendungsbereich der Richtlinie übergeben werden.

1. Daten können als Zeichenfolge übergeben werden, indem das Zeichenfolgenliteral @, der Zeichenfolgenwert und die einseitige Bindung verwendet werden.
2. Daten können als Objekt übergeben werden, = Zeichenfolge Literal, pass Objekt, 2-Wege-Bindung.
3. Daten können als Funktion & String-Literal übergeben werden, ruft externe Funktion auf, kann Daten von Anweisung an Controller übergeben.

Answer 5

<: one-way

= Bindung: Zweiwege-Bindung

&: Funktion Bindung

@: Pass nur Strings