¿Cuál es la diferencia entre & vs @ y = en angularJS?

Resuelto Nur Rony asked hace 11 años • 6 respuestas

Soy muy nuevo en AngularJS. ¿Alguien puede explicarme la diferencia entre estos operadores de AngularJS: &, @ and =al aislar el alcance con el ejemplo adecuado?

Nur Rony avatar Feb 16 '13 14:02 Nur Rony
Aceptado

@permite que un valor definido en el atributo de la directiva se pase al alcance aislado de la directiva. El valor podría ser un valor de cadena simple ( myattr="hello") o podría ser una cadena interpolada de AngularJS con expresiones incrustadas ( myattr="my_{{helloText}}"). Piense en ello como una comunicación "unidireccional" desde el ámbito principal a la directiva secundaria. John Lindquist tiene una serie de screencasts breves que explican cada uno de ellos. El screencast en @ está aquí: https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

&permite que el alcance aislado de la directiva pase valores al alcance principal para su evaluación en la expresión definida en el atributo. Tenga en cuenta que el atributo de directiva es implícitamente una expresión y no utiliza la sintaxis de expresión de doble llave. Este es más difícil de explicar en texto. Screencast en y está aquí: https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

=configura una expresión vinculante bidireccional entre el alcance aislado de la directiva y el alcance principal. Los cambios en el ámbito secundario se propagan al principal y viceversa. Piensa en = como una combinación de @ y &. Screencast en = está aquí: https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

Y finalmente aquí hay un screencast que muestra los tres usados ​​juntos en una sola vista: https://egghead.io/lessons/angularjs-isolate-scope-review

cliff.meyers avatar Feb 16 '2013 13:02 cliff.meyers

Me gustaría explicar los conceptos desde la perspectiva de la herencia de prototipos de JavaScript. Ojalá ayude a entender.

Hay tres opciones para definir el alcance de una directiva:

  1. scope: false: Valor predeterminado angular. El alcance de la directiva es exactamente el de su alcance principal ( parentScope).
  2. scope: true: Angular crea un alcance para esta directiva. El alcance hereda prototípicamente de parentScope.
  3. scope: {...}: el alcance aislado se explica a continuación.

La especificación scope: {...}define un isolatedScope. An isolatedScopeno hereda propiedades de parentScope, aunque isolatedScope.$parent === parentScope. Se define a través de:

app.directive("myDirective", function() {
    return {
        scope: {
            ... // defining scope means that 'no inheritance from parent'.
        },
    }
})

isolatedScopeno tiene acceso directo a parentScope. Pero a veces la directiva necesita comunicarse con el parentScope. Se comunican a través de @, =y &. El tema sobre el uso de símbolos y @estamos hablando de escenarios de uso=&isolatedScope .

Generalmente se usa para algunos componentes comunes compartidos por diferentes páginas, como Modales. Un alcance aislado evita contaminar el alcance global y es fácil de compartir entre páginas.

Aquí hay una directiva básica: http://jsfiddle.net/7t984sf9/5/ . Una imagen para ilustrar es:

ingrese la descripción de la imagen aquí

@: unión unidireccional

@simplemente pasa la propiedad de parentScopea isolatedScope. Se llama one-way binding, lo que significa que no se puede modificar el valor de parentScopelas propiedades. Si está familiarizado con la herencia de JavaScript, podrá comprender fácilmente estos dos escenarios:

  • Si la propiedad vinculante es de tipo primitivo, como interpolatedPropen el ejemplo: puede modificarla interpolatedProp, pero parentProp1no se cambiará. Sin embargo, si cambia el valor de parentProp1, interpolatedPropse sobrescribirá con el nuevo valor (cuando sea angular $digest).

  • Si la propiedad vinculante es algún objeto, como parentObj: dado que el que se pasa isolatedScopees una referencia, modificar el valor provocará este error:

    TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}

=: enlace bidireccional

=se llama two-way binding, lo que significa que cualquier modificación en childScopetambién actualizará el valor en parentScopey viceversa. Esta regla funciona tanto para primitivos como para objetos. Si cambia el tipo de enlace de parentObjto be =, encontrará que puede modificar el valor de parentObj.x. Un ejemplo típico es ngModel.

&: enlace de función

&permite que la directiva llame a alguna parentScopefunción y pase algún valor de la directiva. Por ejemplo, marque JSFiddle: & en el alcance de la directiva .

Defina una plantilla en la que se pueda hacer clic en la directiva como:

<div ng-click="vm.onCheck({valueFromDirective: vm.value + ' is from the directive'})">

Y use la directiva como:

<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>

La variable valueFromDirectivese pasa de la directiva al controlador principal a través de {valueFromDirective: ....

Referencia: comprensión de los ámbitos

Joy avatar Dec 30 '2014 09:12 Joy