AngularJS
Opciones de enlaces AngularJS (`=`, `@`, `&` etc.)

Observaciones

@ enlace unidireccional, atributo de enlace.

Pase un valor literal (no un objeto), como una cadena o un número.

El ámbito secundario obtiene su propio valor, si actualiza el valor, el ámbito principal tiene su propio valor anterior (el ámbito secundario no puede modificar el valor del alcance de parens). Cuando se cambia el valor del ámbito principal, también se cambiará el valor del ámbito primario. Todas las interpolaciones aparecen cada vez en una llamada de resumen, no solo en la creación de directivas.

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

= enlace bidireccional.

Al pasar un valor por referencia, desea compartir el valor entre ambos ámbitos y manipularlos desde ambos ámbitos. No debe usar {{...}} para la interpolación.

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

Pasar la función por referencia es una mala idea: para permitir que el alcance cambie la definición de una función, y se crearán dos observadores innecesarios, debe minimizar el conteo de observadores.

y función de enlace, expresión de enlace.

Pasar un método en una directiva. Proporciona una forma de ejecutar una expresión en el contexto del ámbito principal. El método se ejecutará en el ámbito del elemento primario, puede pasar algunos parámetros desde el ámbito secundario allí. No debe usar {{...}} para la interpolación. Cuando utiliza & en una directiva, genera una función que devuelve el valor de la expresión evaluada en el ámbito principal (no es lo mismo que = donde acaba de pasar una referencia).

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

Todos los parámetros serán envueltos en funciones.

Encuadernación disponible a través de una simple muestra.

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

Aquí tenemos todos los elementos vinculantes.

@ indica que necesitamos un enlace muy básico , desde el ámbito principal al ámbito secundario, sin ningún observador, de ninguna manera. Cada actualización en el ámbito primario se mantendría en el ámbito primario, y cualquier actualización en el ámbito primario no se comunicaría al ámbito primario.

< indica un enlace unidireccional . Las actualizaciones en el ámbito principal se propagarían al ámbito secundario, pero cualquier actualización en el ámbito secundario no se aplicaría al ámbito primario.

= ya se conoce como un enlace de dos vías. Cada actualización en el ámbito primario se aplicaría en los secundarios, y cada actualización secundaria se aplicaría al ámbito primario.

& ahora se utiliza para un enlace de salida. De acuerdo con la documentación del componente, se debe utilizar para hacer referencia al método de alcance principal. En lugar de manipular el alcance de los niños, ¡simplemente llame al método principal con los datos actualizados!

Vincular atributo opcional

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

Los atributos opcionales deben marcarse con un signo de interrogación: =? o =?bar . Es protección para ($compile:nonassign) excepción.