AngularJS
AngularJS-Bindungsoptionen (`=`, @, `&` usw.)

Bemerkungen

@ einseitige Bindung, Attributbindung.

Übergeben Sie einen Literalwert (kein Objekt), z. B. eine Zeichenfolge oder eine Zahl.

Der untergeordnete Bereich erhält seinen eigenen Wert. Wenn er den Wert aktualisiert, hat der übergeordnete Bereich seinen eigenen alten Wert (der untergeordnete Bereich kann den Wert des Parens-Bereichs nicht ändern). Wenn der übergeordnete Bereichswert geändert wird, wird auch der untergeordnete Bereichswert geändert. Alle Interpolationen werden jedes Mal beim Digest-Aufruf angezeigt, nicht nur beim Erstellen von Anweisungen.

<one-way text="Simple text." <!-- 'Simple text.' -->
         simple-value="123" <!-- '123' Note, is actually a string object. -->
         interpolated-value="{{parentScopeValue}}" <!-- Some value from parent scope. You can't change parent scope value, only child scope value. Note, is actually a string object. -->
         interpolated-function-value="{{parentScopeFunction()}}" <!-- Executes parent scope function and takes a value. -->
         
         <!-- Unexpected usage. -->
         object-item="{{objectItem}}" <!-- Converts object|date to string. Result might be: '{"a":5,"b":"text"}'. -->
         function-item="{{parentScopeFunction}}"> <!-- Will be an empty string. -->
</one-way>

= wechselseitige Bindung.

Wenn Sie einen Wert als Referenz übergeben, möchten Sie den Wert für beide Bereiche freigeben und von beiden Bereichen aus bearbeiten. Sie sollten {{...}} nicht für die Interpolation verwenden.

<two-way text="'Simple text.'" <!-- 'Simple text.' -->
         simple-value="123" <!-- 123 Note, is actually a number now. -->
         interpolated-value="parentScopeValue" <!-- Some value from parent scope. You may change it in one scope and have updated value in another. -->
         object-item="objectItem" <!-- Some object from parent scope. You may change object properties in one scope and have updated properties in another. -->
         
         <!-- Unexpected usage. -->
         interpolated-function-value="parentScopeFunction()" <!-- Will raise an error. -->
         function-item="incrementInterpolated"> <!-- Pass the function by reference and you may use it in child scope. -->
</two-way>

Das Übergeben einer Funktion als Referenz ist eine schlechte Idee: Um die Definition einer Funktion ändern zu können und zwei unnötige Watcher werden erstellt, müssen Sie die Anzahl der Beobachter minimieren.

& Funktionsbindung, Ausdrucksbindung.

Übergeben Sie eine Methode in eine Direktive. Es bietet eine Möglichkeit, einen Ausdruck im Kontext des übergeordneten Bereichs auszuführen. Die Methode wird im Geltungsbereich des übergeordneten Elements ausgeführt. Sie können dort einige Parameter aus dem untergeordneten Gültigkeitsbereich übergeben. Sie sollten {{...}} nicht für die Interpolation verwenden. Wenn Sie & in einer Direktive verwenden, wird eine Funktion generiert, die den Wert des Ausdrucks zurückgibt, der für den übergeordneten Bereich ausgewertet wurde (nicht dasselbe wie =, wenn Sie nur eine Referenz übergeben).

<expression-binding interpolated-function-value="incrementInterpolated(param)" <!-- interpolatedFunctionValue({param: 'Hey'}) will call passed function with an argument. -->
                    function-item="incrementInterpolated" <!-- functionItem({param: 'Hey'})() will call passed function, but with no possibility set up a parameter. -->
                    text="'Simple text.'"  <!-- text() == 'Simple text.'-->
                    simple-value="123" <!-- simpleValue() == 123 -->
                    interpolated-value="parentScopeValue" <!-- interpolatedValue() == Some value from parent scope. -->
                    object-item="objectItem"> <!-- objectItem() == Object item from parent scope. -->
</expression-binding>

Alle Parameter werden in Funktionen eingebunden.

Verfügbare Bindung durch ein einfaches Muster

angular.component("SampleComponent", {
  bindings: {
     title: '@',
     movies: '<',
     reservation: "=",
     processReservation: "&"
  }
});

Hier haben wir alle verbindlichen Elemente.

@ zeigt an, dass wir eine sehr grundlegende Bindung benötigen, vom übergeordneten Bereich zum untergeordneten Bereich, ohne einen Beobachter, in irgendeiner Weise. Jede Aktualisierung im übergeordneten Bereich bleibt im übergeordneten Bereich, und keine Aktualisierung des untergeordneten Bereichs wird dem übergeordneten Bereich nicht mitgeteilt.

< zeigt eine einseitige Bindung an . Aktualisierungen im übergeordneten Bereich werden an den untergeordneten Bereich weitergegeben, jedoch werden Aktualisierungen im untergeordneten Bereich nicht auf den übergeordneten Bereich angewendet.

= ist bereits als wechselseitige Bindung bekannt. Jede Aktualisierung des übergeordneten Bereichs wird auf die untergeordneten angewendet, und jede untergeordnete Aktualisierung wird auf den übergeordneten Bereich angewendet.

& wird jetzt für eine Ausgabebindung verwendet. Gemäß der Komponentendokumentation sollte sie verwendet werden, um auf die übergeordnete Bereichsmethode zu verweisen. Anstatt den untergeordneten Bereich zu ändern, rufen Sie einfach die übergeordnete Methode mit den aktualisierten Daten auf!

Binden Sie optionales Attribut

bindings: {
   mandatory: '=' 
   optional: '=?',
   foo: '=?bar'
}

Optionale Attribute sollten mit Fragezeichen markiert werden: =? oder =?bar . ($compile:nonassign) ist ein Schutz für eine Ausnahme ($compile:nonassign) .