AngularJS
AngularJS bindningsalternativ (`=`, `@`, `&` etc.)

Anmärkningar

@ envägsbindning, attributbindning.

Ange ett bokstavligt värde (inte ett objekt), till exempel en sträng eller ett nummer.

Barns räckvidd får sitt eget värde, om det uppdaterar värdet har föräldrarnas räckvidd sitt eget gamla värde (barnomfånget kan inte ändra värdet för parens räckvidd). När föräldrarnas omfångsvärde ändras ändras också barnens omfångsvärde. Alla interpolationer visas varje gång vid samtal, inte bara vid skapande av direktiv.

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

= tvåvägsbindning.

Om du anger ett värde som referens vill du dela värdet mellan båda områdena och manipulera dem från båda områdena. Du bör inte använda {{...}} för interpolering.

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

Att överföra funktion som referens är en dålig idé: för att tillåta utrymme att ändra definitionen av en funktion, och två onödiga vaktare skapas, måste du minimera antalet tittare.

& funktionsbindande, uttrycksbindande.

Vidarebefordra en metod till ett direktiv. Det ger ett sätt att köra ett uttryck i samband med föräldrarnas omfattning. Metoden kommer att utföras inom ramen för föräldern, du kan skicka några parametrar från barnomfånget där. Du bör inte använda {{...}} för interpolering. När du använder & i ett direktiv genererar det en funktion som returnerar värdet på uttrycket som utvärderas mot överordnade omfång (inte samma som = där du bara skickar en referens).

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

Alla parametrar kommer att slås in i funktioner.

Tillgänglig bindning genom ett enkelt prov

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

Här har vi alla bindande element.

@ indikerar att vi behöver en mycket grundläggande bindning , från föräldrarnas omfattning till barnens räckvidd, utan någon somcher, på något sätt. Varje uppdatering i föräldrarnas omfattning förblir inom föräldrarnas omfattning och alla uppdateringar om barnomfånget skulle inte kommuniceras till överordnade omfång.

< indikerar en enkelriktad bindning . Uppdateringar i överordnade omfång skulle spridas till barnens omfattning, men alla uppdateringar i barnomfånget skulle inte tillämpas på överordnade omfång.

= är redan känd som en tvåvägsbindning. Varje uppdatering av föräldrarnas tillämpningsområde skulle tillämpas på barnens uppdateringar och varje uppdatering av barn skulle tillämpas på föräldrarnas omfattning.

& används nu för en utgångsbindning. Enligt komponentdokumentationen ska den användas för att hänvisa till överordnad omfångsmetod. Istället för att manipulera barnens omfattning, ring bara föräldrametoden med uppdaterad information!

Bind tillval attribut

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

Valfria attribut ska markeras med frågetecken: =? eller =?bar . Det är skydd för ($compile:nonassign) undantag.