AngularJS
AngularJS bindingsopties (`=`, `@`, `&` enz.)

Opmerkingen

@ eenrichtingsbinding, kenmerkbinding.

Geef een letterlijke waarde door (geen object), zoals een tekenreeks of nummer.

Onderliggend bereik krijgt zijn eigen waarde, als het de waarde bijwerkt, heeft bovenliggend bereik zijn eigen oude waarde (onderliggend bereik kan de waarde van het bovenliggende bereik niet wijzigen). Wanneer de waarde van het bovenliggende bereik wordt gewijzigd, wordt de waarde van het onderliggende bereik ook gewijzigd. Alle interpolaties verschijnen elke keer bij digest-aanroep, niet alleen bij het creëren van richtlijnen.

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

= bindend in twee richtingen.

Als u een waarde doorgeeft door middel van referentie, wilt u de waarde tussen beide bereiken delen en ze vanaf beide bereiken manipuleren. Gebruik geen {{...}} voor interpolatie.

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

Het doorgeven van een functie door verwijzing is een slecht idee: als u de mogelijkheid hebt om de definitie van een functie te wijzigen en er twee onnodige watchers worden gemaakt, moet u het aantal watchers minimaliseren.

& functie binding, expressie binding.

Geef een methode door aan een richtlijn. Het biedt een manier om een uitdrukking uit te voeren in de context van het bovenliggende bereik. De methode wordt uitgevoerd in het bereik van de ouder, u kunt daar enkele parameters van het onderliggende bereik doorgeven. Gebruik geen {{...}} voor interpolatie. Wanneer u & in een richtlijn gebruikt, wordt een functie gegenereerd die de waarde retourneert van de expressie die wordt geëvalueerd tegen het bovenliggende bereik (niet hetzelfde als = waar u een verwijzing doorgeeft).

<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 parameters worden verpakt in functies.

Beschikbaar bindend via een eenvoudig monster

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

Hier hebben we alle bindende elementen.

@ geeft aan dat we op een of andere manier een zeer basale binding nodig hebben , van de bovenliggende scope tot de onderliggende scope. Elke update in het bovenliggende bereik blijft in het bovenliggende bereik en elke update van het onderliggende bereik wordt niet meegedeeld aan het bovenliggende bereik.

< geeft een eenrichtingsbinding aan . Updates in het bovenliggende bereik worden doorgegeven aan het onderliggende bereik, maar elke update in het onderliggende bereik wordt niet toegepast op het bovenliggende bereik.

= staat al bekend als een tweerichtingsbinding. Elke update van het bovenliggende bereik zou worden toegepast op de onderliggende en elke onderliggende update zou worden toegepast op het bovenliggende bereik.

& wordt nu gebruikt voor een uitvoerbinding. Volgens de componentdocumentatie moet het worden gebruikt om te verwijzen naar de bovenliggende scope-methode. In plaats van het manipuleren van het bereik van de kinderen, roept u gewoon de bovenliggende methode met de bijgewerkte gegevens aan!

Bind optioneel kenmerk

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

Optionele kenmerken moeten worden gemarkeerd met een vraagteken: =? of =?bar . Het is een bescherming voor ($compile:nonassign) uitzondering.