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

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

@ vincula una propiedad de ámbito local/directiva a la valor evaluado del atributo DOM. Si utiliza title=title1 or title="title1", el valor del atributo DOM "título" es simplemente la cadena title1. Si utiliza title="{{title}}", el valor del atributo DOM "título" es el valor interpolado de {{title}}, por lo tanto, la cadena será cualquier propiedad de alcance principal "título" que esté configurada actualmente. Dado que los valores de los atributos son siempre cadenas, siempre terminará con un valor de cadena para esta propiedad en el ámbito de la directiva cuando utilice @.

= vincula una propiedad de ámbito local/directiva a una propiedad de ámbito principal. Así que con =, utiliza el nombre de propiedad del modelo/alcance principal como el valor del atributo DOM. no puedes usar {{}}s con =.

Con @, puedes hacer cosas como title="{{title}} and then some" -- {{title}} se interpola, luego la cadena "y ellos algunos" se concatena con él. La cadena concatenada final es lo que obtiene la propiedad de alcance local/directiva. (No puedes hacer esto con =, solamente @.)

Con @, necesitarás usar attr.$observe('title', function(value) { ... }) si necesita usar el valor en su función de enlace (ing). P.ej, if(scope.title == "...") no funcionará como esperas. Tenga en cuenta que esto significa que solo puede acceder a este atributo de forma asíncrona. No necesita usar $observe() si solo está usando el valor en una plantilla. P.ej, template: '<div>{{title}}</div>'.

Con =, no necesita usar $observe.

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

Sí, pero solo si no usa un alcance aislado. Elimina esta línea de tu directiva

scope: { ... }

y luego su directiva no creará un nuevo alcance. Utilizará el ámbito principal. A continuación, puede acceder directamente a todas las propiedades del ámbito principal.

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

Sí, el enlace bidireccional permite que el ámbito local/directivo y el ámbito principal compartan datos. El "enlace de expresión" permite que la directiva llame a 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. Entonces, si no necesita compartir datos con el padre, solo desea llamar a una función definida en el ámbito principal, puede usar el & sintaxis.

Vea también

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

Hay muchas respuestas excelentes aquí, pero me gustaría ofrecer mi perspectiva sobre las diferencias entre @, = y & encuadernación que resultó ú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. @ el enlace es para pasar cadenas. Estas cuerdas soportan {{}} expresiones para valores interpolados. Por ejemplo: . La expresión interpolada se evalúa con respecto al ámbito principal de la directiva.

2. = el enlace es para el enlace de modelo bidireccional. 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. & el enlace es para pasar un método al alcance de su directiva para que pueda llamarse dentro de su directiva. El método está previnculado al ámbito principal de la directiva y admite argumentos. Por ejemplo, si el método es hola(nombre) en el ámbito principal, entonces para ejecutar el método desde dentro de su directiva, debe llamar a $scope.hello({name:'world'})

Encuentro que es más fácil recordar estas diferencias al referirme a los enlaces de alcance mediante 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:

• @ cadena
• = modelo
• & Método

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

1. =
2. @
3. &

EL = significa enlace bidireccional, por lo que una referencia a una variable en el ámbito principal. Esto significa que, cuando cambia la variable en la directiva, también se cambiará en el ámbito principal.

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

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

Si necesita cambiar varias variables en el ámbito principal, puede ejecutar una función en el ámbito principal desde dentro de 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>"
    };
});

@ obtener como cadena

• Esto no crea ningún tipo de ataduras. Simplemente obtienes la palabra que pasaste como una cadena

= Encuadernación de 2 vías

• los cambios realizados desde el controlador se reflejarán en la referencia que tiene la directiva, y viceversa

& Esto se comporta un poco diferente, porque el osciloscopio obtiene una función que devuelve el objeto que se pasó en. Supongo que esto era necesario para que funcionara. El violín debería dejar esto claro.

• Después de llamar a esta función getter, el objeto resultante se comporta de la siguiente manera:
  • si un función fue pasado: luego la función se ejecuta en el cierre principal (controlador) cuando se llama
  • si un no funciona fue pasado: simplemente obtenga una copia local del objeto que no tiene enlaces

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

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

1. Ámbito principal: Esta es la herencia de alcance predeterminada.

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

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

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

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: Esto se usa 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 alcance 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 pasen 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 del 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 mapeado sea una expresión. Esto es muy importante; porque para que el prefijo “@” funcione, necesitamos envolver el valor del atributo dentro de {{}}.

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

& se usa para vincular el método del 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 ámbito del controlador y en el ámbito 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 mucho poder 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 entre @ y =):

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

Aquí hay una aquí al blog que lo describe muy bien.

Simplemente podemos usar: -

1. @ :- para valores de cadena para enlace de datos unidireccional. en el enlace de datos de una forma, 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 bidireccional, puede cambiar el valor del alcance en la directiva y también en html.

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

EDITAR

En nuestros Componente definición para Angular versión 1.5 Y por encima
Hay cuatro tipos diferentes de fijaciones:

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

2. < enlace unidireccional :- cuando solo queremos leer un parámetro de un ámbito principal 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 enviar algo a su ámbito principal

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>

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 lío que son los ámbitos de AngularJS. esto cubrirá =, <, @, & y ::. El escrito completo se puede encontrar aquí.

= establece un enlace de dos vías. Cambiar la propiedad en el padre dará como resultado un cambio en el hijo, y viceversa.

< establece una vinculación unidireccional, de padre a hijo. Cambiar la propiedad en el padre resultará en un cambio en el hijo, pero cambiar la propiedad del hijo no afectará a la propiedad del padre.

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

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

bindings: {
    description: '@', 
}

Aquí el description propiedad en el ámbito secundario será el valor actual de la expresión "The movie title is {{$ctrl.movie.title}}", Donde movie es un objeto en el ámbito principal.

& 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 principal, sustituyendo parámetros con variables del ámbito secundario. Un ejemplo (ruido sordo):

<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 que los parentVar=10, la expresion parentFoo({myVar:5, myOtherVar:'xyz'}) evaluará a 5 + 10 + 'xyz' y el componente se renderizará como:

<div>15xyz</div>

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

devolución de llamada usando &:

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

<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 tanto en el ámbito principal como en el secundario.

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

[Documentos oficiales]
Las versiones posteriores de AngularJS introducen la opción de tener un enlace único, 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 a la anterior; para declarar un enlace de una sola vez, agrega :: delante de la expresión en el etiqueta de componente:

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

Esto propagará el valor de tagline al ámbito secundario sin establecer un enlace unidireccional o bidireccional. Nota:: Si tagline es inicialmente undefined en el ámbito principal, 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, una matriz, una cadena, etc.

EL = camino es Encuadernación bidireccional, que te permite tener para vivir cambios dentro de su directiva. Cuando alguien cambie esa variable fuera de la directiva, tendrá esos datos modificados dentro de su directiva, pero @ el camino no es unión bidireccional. Funciona como Texto. Te unes una vez, y solo tendrás su valor.

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

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

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

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

& La propiedad de alcance local permite al consumidor de una directiva pasar una función que la directiva puede invocar.

Consulte el enlace a continuación que le brinda una comprensión clara con ejemplos. Lo encontré realmente muy útil, así que pensé en compartirlo.

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

Incluso cuando el alcance es local, como en su ejemplo, puede acceder al alcance principal a través de la propiedad $parent. Supongamos en el siguiente código que title se define en el ámbito principal. A continuación, 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 usando atributos.

Un ejemplo de dónde encontré la notación "&", que se usa "para pasar datos del alcance aislado a través de una expresión y al alcance principal", útil (y no se pudo usar un enlace de datos bidireccional) fue 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 era un botón de eliminación y aquí era útil adjuntar una función de eliminación desde el ámbito externo a través de &. Dentro de la directiva de renderizado parece

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

enlace de datos bidireccional, es decir data = "=" no se puede utilizar ya que la función de eliminación se ejecutaría en cada $digest ciclo, 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 trata de todas las opciones:

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm

la principal diferencia entre ellos es sólo

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

@ y = ver otras respuestas.

Una Gotcha Introducción &
TL; DR;
& se expresión (no solo funciona como en ejemplos en otras respuestas) de un padre, y lo 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 (nombre de función par) 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 esto expr será una función, que llama a la expresión, como:
function expr(){return x == y}.
entonces en el html de la directiva <button ng-click="expr()"></button> llamará a la expresión. En js de la directiva solo $scope.expr() también llamará a la expresión.
La expresión se llamará 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>
entonces la expresión será llamada con su parámetro x y el parámetro de los padres y.
Puede anular ambos.
Ahora ya sabes, por qué <button ng-click="functionFromParent({x:5})"></button> obras.
Porque simplemente llama a la expresión del padre (por ejemplo, <myDirective functionFromParent="function1(x)"></myDirective>) y reemplaza los posibles valores con sus parámetros especificados, en este caso x.
podría ser:
<myDirective functionFromParent="function1(x) + 5"></myDirective>
or
<myDirective functionFromParent="function1(x) + z"></myDirective>
con niño llamar:
<button ng-click="functionFromParent({x:5, z: 4})"></button>.
o incluso con reemplazo de 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 solo una comparación. Y puedes reemplazar cualquier variable de esta expresión.

Ejemplos:
plantilla de directiva vs código llamado:
padre ha definido $scope.x, $scope.y:
plantilla principal: <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> llamadas 5 == 6

padre ha definido $scope.function1, $scope.x, $scope.y:
plantilla principal: <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 $scope.myFn como función:
<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 ámbito principal se pasará a la vista de directiva y se evaluará. Esto se limita a una forma, 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 también en el ámbito principal. Esto es de dos vías.

¿Puedo acceder también directamente al ámbito principal, 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 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 principal", pero eso también parece funcionar bien con el enlace bidireccional. ¿Por qué sería mejor la ruta de la expresión?

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

Puede encontrar las diferencias entre las múltiples 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/de 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