AngularJS
Opcje powiązań AngularJS (`=`, `@`, `&` itd.)

Uwagi

@ wiązanie jednokierunkowe, wiązanie atrybutów.

Przekaż wartość literalną (nie obiekt), taką jak ciąg znaków lub liczba.

Zakres potomny otrzymuje swoją wartość, jeśli aktualizuje wartość, zakres macierzysty ma swoją własną starą wartość (zakres potomny nie może modyfikować wartości zakresu parens). Zmiana wartości zakresu nadrzędnego również spowoduje zmianę wartości zakresu podrzędnego. Wszystkie interpolacje pojawiają się za każdym razem podczas podsumowania połączenia, nie tylko przy tworzeniu dyrektywy.

<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>

= wiązanie dwustronne.

Przekazując wartość przez odwołanie, chcesz współdzielić wartość między oboma zakresami i manipulować nimi z obu zakresów. Nie należy używać {{...}} do interpolacji.

<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>

Przekazywanie funkcji przez odwołanie jest złym pomysłem: aby umożliwić zakresowi zmianę definicji funkcji i zostaną utworzone dwa niepotrzebne obserwatory, musisz zminimalizować liczbę obserwatorów.

i wiązanie funkcji, wiązanie wyrażeń.

Przekaż metodę do dyrektywy. Zapewnia sposób wykonania wyrażenia w kontekście zakresu nadrzędnego. Metoda zostanie wykonana w zakresie elementu nadrzędnego, możesz przekazać tam niektóre parametry z zakresu podrzędnego. Nie należy używać {{...}} do interpolacji. Kiedy używasz & w dyrektywie, generuje ona funkcję, która zwraca wartość wyrażenia obliczonego względem zakresu nadrzędnego (nie to samo co =, gdy przekazujesz referencję).

<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>

Wszystkie parametry zostaną zawinięte w funkcje.

Dostępne wiązanie za pomocą prostej próbki

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

Tutaj mamy wszystkie elementy wiążące.

@ wskazuje, że potrzebujemy bardzo podstawowego wiązania , od zakresu nadrzędnego do zakresu podrzędnego, bez żadnego obserwatora, w jakikolwiek sposób. Każda aktualizacja w zakresie nadrzędnym pozostanie w zakresie nadrzędnym, a wszelkie aktualizacje w zakresie podrzędnym nie będą przekazywane do zakresu nadrzędnego.

< oznacza wiązanie w jedną stronę . Aktualizacje w zakresie nadrzędnym byłyby propagowane do zakresu podrzędnego, ale żadna aktualizacja w zakresie podrzędnym nie byłaby stosowana do zakresu nadrzędnego.

= jest już znany jako wiązanie dwukierunkowe. Każda aktualizacja zakresu nadrzędnego byłaby stosowana na tych podrzędnych, a każda aktualizacja podrzędna byłaby stosowana do zakresu nadrzędnego.

i jest teraz używany do wiązania wyjściowego. Zgodnie z dokumentacją komponentu należy go użyć do odniesienia do metody zakresu nadrzędnego. Zamiast manipulować zasięgiem potomnym, wystarczy wywołać metodę nadrzędną ze zaktualizowanymi danymi!

Wiąż opcjonalny atrybut

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

Opcjonalne atrybuty należy oznaczyć znakiem zapytania: =? lub =?bar . Jest to ochrona wyjątku ($compile:nonassign) .