AngularJS
Options de liaisons AngularJS (`=`, `@`, `&` etc.)

Remarques

@ liaison unidirectionnelle, liaison d'attribut.

Transmettez une valeur littérale (pas un objet), telle qu'une chaîne ou un nombre.

La portée enfant a sa propre valeur, si elle met à jour la valeur, la portée parent a sa propre valeur (la portée de l'enfant ne peut pas modifier la valeur de la portée parens). Lorsque la valeur de la portée parent est modifiée, la valeur de la portée enfant sera également modifiée. Toutes les interpolations apparaissent chaque fois lors d'un appel abrégé, pas seulement lors de la création d'une directive.

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

= liaison bidirectionnelle.

En passant une valeur par référence, vous souhaitez partager la valeur entre les deux étendues et les manipuler à partir des deux portées. Vous ne devez pas utiliser {{...}} pour l'interpolation.

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

Passer fonction par référence est une mauvaise idée: pour permettre à la portée de modifier la définition d'une fonction, et deux observateurs inutiles seront créés, vous devez minimiser le nombre d'observateurs.

& liaison de fonction, liaison d'expression.

Transmettre une méthode dans une directive. Il permet d'exécuter une expression dans le contexte de l'étendue parent. La méthode sera exécutée dans la portée du parent, vous pouvez y transmettre certains paramètres de la portée de l'enfant. Vous ne devez pas utiliser {{...}} pour l'interpolation. Lorsque vous utilisez & dans une directive, il génère une fonction qui renvoie la valeur de l'expression évaluée par rapport à la portée parente (différente de = où vous ne faites que passer une référence).

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

Tous les paramètres seront intégrés dans des fonctions.

Liaison disponible via un échantillon simple

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

Ici, nous avons tous les éléments de liaison.

@ indique que nous avons besoin d'une liaison très simple , de l'étendue parent à l'étendue enfants, sans aucun observateur, de quelque manière que ce soit. Chaque mise à jour de l'étendue parent resterait dans l'étendue parent et toute mise à jour de l'étendue enfant ne serait pas communiquée à l'étendue parent.

< indique une liaison à sens unique . Les mises à jour dans l'étendue parent seraient propagées à l'étendue enfants, mais toute mise à jour dans l'étendue enfants ne serait pas appliquée à l'étendue parent.

= est déjà connu comme une liaison bidirectionnelle. Chaque mise à jour de l'étendue parent serait appliquée aux enfants et chaque mise à jour enfant serait appliquée à l'étendue parent.

& est maintenant utilisé pour une liaison de sortie. Selon la documentation du composant, il doit être utilisé pour référencer la méthode de la portée parent. Au lieu de manipuler la portée des enfants, appelez simplement la méthode parente avec les données mises à jour!

Attribut facultatif de liaison

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

Les attributs facultatifs doivent être marqués d'un point d'interrogation: =? ou =?bar . C'est une protection pour l'exception ($compile:nonassign) .