¿Cuál es la diferencia entre '@' y '=' en el alcance de la directiva en AngularJS?

Leí cuidadosamente la documentación de AngularJS sobre el tema, y ​​luego jugueteé con una directiva. Aquí está el violín .

Y aquí hay algunos fragmentos relevantes:

• Del HTML :

  <pane bi-title="title" title="{{title}}">{{text}}</pane>

• De la directiva del panel:

  scope: { biTitle: '=', title: '@', bar: '=' },

Hay varias cosas que no entiendo:

• ¿Por qué tengo que usar "{{title}}"con '@'y "title"con '='?
• ¿Puedo acceder directamente al ámbito principal directamente, sin decorar mi elemento con un atributo?
• La documentación dice "A menudo es deseable pasar datos del ámbito aislado a través de la expresión y al ámbito primario" , pero eso parece funcionar bien con el enlace bidireccional también. ¿Por qué la ruta de expresión sería mejor?

Encontré otro violín que también muestra la solución de expresión: http://jsfiddle.net/maxisam/QrCXh/

¿Por qué tengo que usar "{{title}}" con ' @ ' y "title" con ' = '?

@ vincula una propiedad de alcance local / directiva al valor evaluado del atributo DOM . Si usa title=title1o title="title1", el valor del atributo DOM "título" es simplemente la cadena title1. Si lo usa title="{{title}}", el valor del atributo DOM "título" es el valor interpolado de {{title}}, por lo tanto, la cadena será la propiedad de ámbito principal "título" actualmente establecida. Como los valores de los atributos son siempre cadenas, siempre terminará con un valor de cadena para esta propiedad en el alcance de la directiva cuando use @ .

= vincula una propiedad de ámbito local / directiva a una propiedad de ámbito principal . Entonces, con = , usa el nombre de la propiedad modelo / alcance principal como el valor del atributo DOM. No puedes usar {{}}s con = .

Con @, puede hacer cosas como title="{{title}} and then some": {{title}} se interpola, luego la cadena "y algunos" se concatena con ella. La cadena final concatenada es lo que obtiene la propiedad de ámbito local / directiva. (No puede hacer esto con = , solo @ .)

Con @ , deberá usarlo attr.$observe('title', function(value) { ... })si necesita usar el valor en su función de enlace (ing). Por ejemplo, if(scope.title == "...")no funcionará como esperabas. Tenga en cuenta que esto significa que solo puede acceder a este atributo de forma asincrónica . No necesita usar $ observe () si solo está usando el valor en una plantilla. Ej template: '<div>{{title}}</div>'.

Con = , no necesita usar $ observe.

¿Puedo acceder directamente al ámbito principal directamente, sin decorar mi elemento con un atributo?

Sí, pero solo si no utiliza un alcance aislado. Eliminar esta línea de su directiva

scope: { ... }

y luego su directiva no creará un nuevo alcance. Utilizará el ámbito principal. Luego puede acceder a todas las propiedades del ámbito primario directamente.

La documentación dice "A menudo es deseable pasar datos del ámbito aislado a través de una expresión y al ámbito primario", pero eso parece funcionar bien con el enlace bidireccional también. ¿Por qué la ruta de expresión sería mejor?

Sí, el enlace bidireccional permite que el ámbito local / directivo y el ámbito primario compartan datos. El "enlace de expresión" permite que la directiva invoque una expresión (o función) definida por un atributo DOM, y también puede pasar datos como argumentos a la expresión o función. Por lo tanto, si no necesita compartir datos con el padre (solo desea llamar a una función definida en el ámbito primario), puede usar la sintaxis & .

Ver también

• Publicación de blog de alcance aislado de Lukas (cubre @, =, &)
• Explicación de dnc253 de @ y =
• mi respuesta tipo blog sobre ámbitos: la sección de directivas (en la parte inferior, justo antes de la sección Resumen) tiene una imagen de un ámbito aislado y su ámbito principal: el ámbito de la directiva utiliza @ para una propiedad y = para otra
• ¿Cuál es la diferencia entre & vs @ y = en angularJS

Hay un montón de grandes respuestas aquí, pero me gustaría ofrecer mi punto de vista sobre las diferencias entre @, =y &vinculante que demostrado ser útil para mí.

Los tres enlaces son formas de pasar datos desde su ámbito principal al ámbito aislado de su directiva a través de los atributos del elemento:

1. @ vinculante es para pasar cadenas. Estas cadenas admiten {{}}expresiones para valores interpolados. Por ejemplo: . La expresión interpolada se evalúa contra el alcance principal de la directiva.

2. = enlace es para enlace de modelo de dos vías. El modelo en el ámbito principal está vinculado al modelo en el ámbito aislado de la directiva. Los cambios en un modelo afectan al otro, y viceversa.

3. & vinculante es para pasar un método al alcance de su directiva para que pueda llamarse dentro de su directiva. El método está vinculado previamente al ámbito principal de la directiva y admite argumentos. Por ejemplo, si el método es hello (name) en el ámbito primario, entonces para ejecutar el método desde dentro de su directiva, debe llamar a $ scope.hello ({name: 'world'})

Creo que es más fácil recordar estas diferencias al referirme a los enlaces de alcance con una descripción más corta:

• @ Enlace de cadena de atributo
• = Encuadernación de modelo bidireccional
• & Enlace de método de devolución de llamada

Los símbolos también aclaran qué representa la variable de alcance dentro de la implementación de su directiva:

• @ cuerda
• = modelo
• & método

En orden de utilidad (para mí de todos modos):

1. =
2. @ @
3. Y

Los =medios de unión bi-direccional, por lo que una referencia a una variable con el alcance de los padres. Esto significa que, cuando cambia la variable en la directiva, también cambiará en el ámbito primario.

@ significa que la variable se copiará (clonará) en la directiva.

Que yo sepa, <pane bi-title="{{title}}" title="{{title}}">{{text}}</pane>debería funcionar también. bi-titlerecibirá el valor de la variable de ámbito principal, que se puede cambiar en la directiva.

Si necesita cambiar varias variables en el ámbito primario, puede ejecutar una función en el ámbito primario desde la directiva (o pasar datos a través de un servicio).

Si desea ver más cómo funciona esto con un ejemplo en vivo. http://jsfiddle.net/juanmendez/k6chmnch/

var app = angular.module('app', []);
app.controller("myController", function ($scope) {
    $scope.title = "binding";
});
app.directive("jmFind", function () {
    return {
        replace: true,
        restrict: 'C',
        transclude: true,
        scope: {
            title1: "=",
            title2: "@"
        },
        template: "<div><p>{{title1}} {{title2}}</p></div>"
    };
});

@ llegar como una cuerda

• Esto no crea ningún tipo de enlaces. Simplemente estás recibiendo la palabra que pasaste como una cadena

= Unión de 2 vías

• Los cambios realizados desde el controlador se reflejarán en la referencia de la directiva y viceversa.

&Esto se comporta de manera un poco diferente, porque el ámbito obtiene una función que devuelve el objeto que se pasó . Supongo que esto fue necesario para que funcione. El violín debe dejar esto claro.

• Después de llamar a esta función getter, el objeto resultante se comporta de la siguiente manera:
  • si se pasó una función : entonces la función se ejecuta en el cierre primario (controlador) cuando se llama
  • si se pasó una no función : simplemente obtenga una copia local del objeto que no tenga enlaces

Este violín debe demostrar cómo funcionan . Preste especial atención a las funciones de alcance con get...el nombre para comprender mejor lo que quiero decir sobre&

Hay tres formas en que se puede agregar alcance en la directiva:

1. Alcance principal : esta es la herencia de alcance predeterminada.

El alcance de la directiva y su padre (controlador / directiva dentro del cual se encuentra) es el mismo. Por lo tanto, cualquier cambio realizado en las variables de ámbito dentro de la directiva también se refleja en el controlador principal. No necesita especificar esto, ya que es el predeterminado.

2. Ámbito secundario: la directiva crea un ámbito secundario que hereda del ámbito primario si especifica la variable de ámbito de la directiva como verdadera.

Aquí, si cambia las variables de alcance dentro de la directiva, no se reflejará en el alcance primario, pero si cambia la propiedad de una variable de alcance, eso se refleja en el alcance primario, ya que realmente modificó la variable de alcance del padre .

Ejemplo,

app.directive("myDirective", function(){

    return {
        restrict: "EA",
        scope: true,
        link: function(element, scope, attrs){
            scope.somvar = "new value"; //doesnot reflect in the parent scope
            scope.someObj.someProp = "new value"; //reflects as someObj is of parent, we modified that but did not override.
        }
    };
});

3. Alcance aislado : se utiliza cuando desea crear el alcance que no hereda del alcance del controlador.

Esto sucede cuando está creando complementos, ya que esto hace que la directiva sea genérica, ya que se puede colocar en cualquier HTML y no se ve afectada por su ámbito principal.

Ahora, si no desea ninguna interacción con el ámbito principal, puede especificar el ámbito como un objeto vacío. me gusta,

scope: {} //this does not interact with the parent scope in any way

En general, este no es el caso, ya que necesitamos cierta interacción con el ámbito principal, por lo que queremos que se transmitan algunos de los valores / cambios. Por esta razón, utilizamos:

1. "@"   (  Text binding / one-way binding )
2. "="   ( Direct model binding / two-way binding )
3. "&"   ( Behaviour binding / Method binding  )

@ significa que los cambios desde el alcance del controlador se reflejarán en el alcance de la directiva, pero si modifica el valor en el alcance de la directiva, la variable del alcance del controlador no se verá afectada.

@ siempre espera que el atributo asignado sea una expresión. Esto es muy importante; porque para que el prefijo "@" funcione, debemos ajustar el valor del atributo dentro de {{}}.

= es bidireccional, por lo que si cambia la variable en el alcance de la directiva, la variable del alcance del controlador también se ve afectada

& se usa para vincular el método de alcance del controlador para que, si es necesario, podamos llamarlo desde la directiva

La ventaja aquí es que el nombre de la variable no necesita ser el mismo en el alcance del controlador y el alcance de la directiva.

Ejemplo, el alcance de la directiva tiene una variable "dirVar" que se sincroniza con la variable "contVar" del alcance del controlador. Esto le da mucha potencia y generalización a la directiva, ya que un controlador puede sincronizarse con la variable v1, mientras que otro controlador que usa la misma directiva puede pedirle a dirVar que se sincronice con la variable v2.

A continuación se muestra el ejemplo de uso:

La directiva y el controlador son:

 var app = angular.module("app", []);
 app.controller("MainCtrl", function( $scope ){
    $scope.name = "Harry";
    $scope.color = "#333333";
    $scope.reverseName = function(){
     $scope.name = $scope.name.split("").reverse().join("");
    };
    $scope.randomColor = function(){
        $scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {
            name: "@",
            color: "=",
            reverse: "&"
        },
        link: function(element, scope, attrs){
           //do something like
           $scope.reverse(); 
          //calling the controllers function
        }
    };
});

Y el html (tenga en cuenta la diferencia para @ y =):

<div my-directive
  class="directive"
  name="{{name}}"
  reverse="reverseName()"
  color="color" >
</div>

Aquí hay un enlace al blog que lo describe muy bien.

Simplemente podemos usar: -

1. @ : - para valores de cadena para enlace de datos unidireccional. de una manera, el enlace de datos solo puede pasar el valor del alcance a la directiva

2. = : - para el valor del objeto para el enlace de datos bidireccional. en el enlace de datos de dos vías, puede cambiar el valor del alcance en la directiva, así como también en html.

3. & : - para métodos y funciones.

EDITAR

En nuestra definición de Componente para la versión angular 1.5 Y arriba,
hay cuatro tipos diferentes de enlaces:

1. = Enlace de datos bidireccional : si cambiamos el valor, se actualizará automáticamente

2. < enlace unidireccional : cuando solo queremos leer un parámetro de un ámbito primario y no actualizarlo.

3. @esto es para parámetros de cadena

4. &esto es para devoluciones de llamada en caso de que su componente necesite generar algo en su ámbito primario

Creé un pequeño archivo HTML que contiene código angular que demuestra las diferencias entre ellos:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl as VM">
      <a my-dir
        attr1="VM.sayHi('Juan')" <!-- scope: "=" -->
        attr2="VM.sayHi('Juan')" <!-- scope: "@" -->
        attr3="VM.sayHi('Juan')" <!-- scope: "&" -->
      ></a>
    </div>
    <script>
    angular.module("myApp", [])
    .controller("myCtrl", [function(){
      var vm = this;
      vm.sayHi = function(name){
        return ("Hey there, " + name);
      }
    }])
    .directive("myDir", [function(){
      return {
        scope: {
          attr1: "=",
          attr2: "@",
          attr3: "&"
        },
        link: function(scope){
          console.log(scope.attr1);   // =, logs "Hey there, Juan"
          console.log(scope.attr2);   // @, logs "VM.sayHi('Juan')"
          console.log(scope.attr3);   // &, logs "function (a){return h(c,a)}"
          console.log(scope.attr3()); // &, logs "Hey there, Juan"
        }
      }
    }]);
    </script>
  </body>
</html>

El = camino es un enlace bidireccional , que le permite tener cambios en vivo dentro de su directiva. Cuando alguien cambia esa variable fuera de la directiva, tendrá esos datos modificados dentro de su directiva, pero @ way no es un enlace bidireccional . Funciona como texto . Atas una vez y solo tendrás su valor.

Para tenerlo más claro, puedes usar este excelente artículo:

Ámbito de la directiva AngularJS '@' y '='

Esta pregunta ya ha sido golpeada hasta la muerte, pero la compartiré de todos modos en caso de que alguien más esté luchando con el horrible desastre que es el alcance de AngularJS. Esta cubierta =, <, @, &y ::. La redacción completa se puede encontrar aquí .

=establece un enlace bidireccional. Cambiar la propiedad en el padre dará como resultado un cambio en el hijo, y viceversa.

<establece un enlace unidireccional, de padre a hijo. Cambiar la propiedad en el padre dará como resultado un cambio en el hijo, pero cambiar la propiedad del hijo no afectará la propiedad del padre.

@asignará a la propiedad secundaria el valor de cadena del atributo de etiqueta. Si el atributo contiene una expresión , la propiedad secundaria se actualiza cada vez que la expresión se evalúa en una cadena diferente. Por ejemplo:

<child-component description="The movie title is {{$ctrl.movie.title}}" />

bindings: {
    description: '@', 
}

Aquí, la descriptionpropiedad en el ámbito secundario será el valor actual de la expresión "The movie title is {{$ctrl.movie.title}}", donde moviees un objeto en el ámbito primario.

&es un poco complicado, y de hecho no parece haber ninguna razón convincente para usarlo. Le permite evaluar una expresión en el ámbito primario, sustituyendo parámetros con variables del ámbito secundario. Un ejemplo ( plunk ):

<child-component 
  foo = "myVar + $ctrl.parentVar + myOtherVar"
</child-component>

angular.module('heroApp').component('childComponent', {
  template: "<div>{{  $ctrl.parentFoo({myVar:5, myOtherVar:'xyz'})  }}</div>",
  bindings: {
    parentFoo: '&foo'
  }
});

Dado parentVar=10, la expresión parentFoo({myVar:5, myOtherVar:'xyz'})se evaluará 5 + 10 + 'xyz'y el componente se representará como:

<div>15xyz</div>

¿Cuándo querrías usar esta funcionalidad enrevesada? &A menudo la gente lo utiliza para pasar al ámbito secundario una función de devolución de llamada en el ámbito primario. En realidad, sin embargo, se puede lograr el mismo efecto usando '<' para pasar la función, que es más sencilla y evita la incómoda sintaxis de llaves para pasar parámetros ( {myVar:5, myOtherVar:'xyz'}). Considerar:

Devolución de llamada utilizando &:

<child-component parent-foo="$ctrl.foo(bar)"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo({bar:'xyz'})">Call foo in parent</button>',
  bindings: {
    parentFoo: '&'
  }
});

Devolución de llamada utilizando <:

<child-component parent-foo="$ctrl.foo"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo('xyz')">Call foo in parent</button>',
  bindings: {
    parentFoo: '<'
  }
});

Tenga en cuenta que los objetos (y las matrices) se pasan por referencia al ámbito secundario, no se copian. Lo que esto significa es que, incluso si se trata de un enlace unidireccional, está trabajando con el mismo objeto en el ámbito primario y secundario.

Para ver los diferentes prefijos en acción, abra este plunk .

[Documentos oficiales]
Las versiones posteriores de AngularJS introducen la opción de tener un enlace de una sola vez, donde la propiedad del ámbito secundario se actualiza solo una vez. Esto mejora el rendimiento al eliminar la necesidad de vigilar la propiedad principal. La sintaxis es diferente de la anterior; para declarar un enlace de una sola vez, agregue ::delante de la expresión en la etiqueta del componente :

<child-component 
  tagline = "::$ctrl.tagline">
</child-component>

Esto propagará el valor del taglineámbito secundario sin establecer un enlace unidireccional o bidireccional. Nota : si taglineestá inicialmente undefineden el ámbito primario, angular lo observará hasta que cambie y luego realizará una actualización única de la propiedad correspondiente en el ámbito secundario.

Resumen

La siguiente tabla muestra cómo funcionan los prefijos dependiendo de si la propiedad es un objeto, matriz, cadena, etc.

La propiedad @ alcance local se utiliza para acceder a los valores de cadena que se definen fuera de la directiva.

= En los casos en que necesite crear un enlace bidireccional entre el alcance externo y el alcance aislado de la directiva, puede usar el carácter =.

Y propiedad de ámbito local permite al consumidor de una directiva pasar una función que la directiva puede invocar.

Compruebe amablemente el siguiente enlace que le brinda una comprensión clara con ejemplos. Me pareció muy útil, así que pensé en compartirlo.

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

Incluso cuando el ámbito es local, como en su ejemplo, puede acceder al ámbito primario a través de la propiedad $parent. Suponga en el siguiente código, que titlese define en el ámbito primario. Luego puede acceder al título como $parent.title:

link : function(scope) { console.log(scope.$parent.title) },
template : "the parent has the title {{$parent.title}}"

Sin embargo, en la mayoría de los casos, el mismo efecto se obtiene mejor utilizando atributos.

Un ejemplo de dónde encontré la notación "&", que se usa "para pasar datos del ámbito aislado a través de una expresión y al ámbito primario", útil (y no se pudo utilizar un enlace de datos bidireccional) estaba en una directiva para representar una estructura de datos especial dentro de una repetición ng.

<render data = "record" deleteFunction = "dataList.splice($index,1)" ng-repeat = "record in dataList" > </render>

Una parte de la representación fue un botón de eliminación y aquí fue útil adjuntar una función de eliminación desde el ámbito externo a través de &. Dentro de la directiva de renderización parece

scope : { data = "=", deleteFunction = "&"},
template : "... <button ng-click = "deleteFunction()"></button>"

La vinculación de datos bidireccional, es decir data = "=", no se puede utilizar, ya que la función de eliminación se ejecutaría en cada $digestciclo, lo que no es bueno, ya que el registro se elimina inmediatamente y nunca se procesa.

Implementé todas las opciones posibles en un violín.

Se ocupa de todas las opciones:

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm

la principal diferencia entre ellos es solo

@ Attribute string binding
= Two-way model binding
& Callback method binding

@ y = ver otras respuestas.

Uno se equivocó sobre TL; DR; obtiene la expresión (no solo función como en los ejemplos en otras respuestas) de un padre, y la establece como una función en la directiva, que llama a la expresión. Y esta función tiene la capacidad de reemplazar cualquier variable (incluso el nombre de la función) de expresión, pasando un objeto con las variables. &

&

explicado
& es una referencia de expresión, eso significa que si pasa algo como <myDirective expr="x==y"></myDirective>
en la directiva, esta exprserá una función, que llama a la expresión, como:
function expr(){return x == y} .
entonces, en la directiva, html <button ng-click="expr()"></button>llamará a la expresión. En js de la directiva solo $scope.expr()llamaremos a la expresión también.
Se llamará a la expresión con $ scope.x y $ scope.y del padre.
¡Tienes la capacidad de anular los parámetros!
Si los configura por llamada, por ejemplo <button ng-click="expr({x:5})"></button>
, la expresión se llamará con su parámetro xy el parámetro principal y.
Puedes anular ambos.
Ahora ya sabes, por qué <button ng-click="functionFromParent({x:5})"></button>funciona.
Porque solo llama a la expresión de padre (p. Ej.<myDirective functionFromParent="function1(x)"></myDirective>) y reemplaza los posibles valores con los parámetros especificados, en este caso x.
podría ser:
<myDirective functionFromParent="function1(x) + 5"></myDirective>
o
<myDirective functionFromParent="function1(x) + z"></myDirective>
con el llamado niño:
<button ng-click="functionFromParent({x:5, z: 4})"></button>.
o incluso con el reemplazo de la función:
<button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button>.

es solo una expresión, no importa si es una función, o muchas funciones, o simplemente una comparación. Y puede reemplazar cualquier variable de esta expresión.

Ejemplos:
plantilla de directiva frente a código llamado:
padre ha definido $ scope.x, $ scope.y:
plantilla padre: <myDirective expr="x==y"></myDirective>
<button ng-click="expr()"></button>llamadas $scope.x==$scope.y
<button ng-click="expr({x: 5})"></button>llamadas 5 == $scope.y
<button ng-click="expr({x:5, y:6})"></button>llamadas5 == 6

padre ha definido $ scope.function1, $ scope.x, $ scope.y:
plantilla padre:<myDirective expr="function1(x) + y"></myDirective>

<button ng-click="expr()"></button>Llamadas $scope.function1($scope.x) + $scope.y
<button ng-click="expr({x: 5})"></button>Llamadas $scope.function1(5) + $scope.y
<button ng-click="expr({x:5, y:6})"></button>llamadas $scope.function1(5) + 6
Directiva tiene como función $ scope.myFn:
<button ng-click="expr({function1: myFn, x:5, y:6})"></button> llamadas$scope.myFn(5) + 6

¿Por qué tengo que usar "{{title}}" con '@' y "title" con '='?

Cuando usa {{title}}, solo el valor del alcance principal se pasará a la vista directiva y se evaluará. Esto se limita a un solo sentido, lo que significa que el cambio no se reflejará en el ámbito principal. Puede usar '=' cuando desee reflejar los cambios realizados en la directiva secundaria al ámbito primario también. Esto es de dos vías.

¿Puedo acceder directamente al ámbito principal directamente, sin decorar mi elemento con un atributo?

Cuando la directiva tiene un atributo de alcance (alcance: {}), ya no podrá acceder directamente al alcance principal. Pero aún así es posible acceder a él a través de scope. $ Parent, etc. Si elimina el alcance de la directiva, se puede acceder directamente.

La documentación dice "A menudo es deseable pasar datos del ámbito aislado a través de una expresión y al ámbito primario", pero eso parece funcionar bien con el enlace bidireccional también. ¿Por qué la ruta de expresión sería mejor?

Depende del contexto. Si desea llamar a una expresión o función con datos, use & y si desea compartir datos, puede usar la forma bidireccional usando '='

Puede encontrar las diferencias entre varias formas de pasar datos a la directiva en el siguiente enlace:

AngularJS - Ámbitos aislados - @ vs = vs &

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

@ Enlace de cadena de atributo (unidireccional) = Enlace de modelo bidireccional y enlace de método de devolución de llamada

@ vincula una propiedad de ámbito local / directiva al valor evaluado del atributo DOM. = vincula una propiedad de ámbito local / directiva a una propiedad de ámbito principal. & vinculante es para pasar un método al alcance de su directiva para que pueda llamarse dentro de su directiva.

@ Enlace de cadena de atributo = Enlace de modelo bidireccional y enlace de método de devolución de llamada