¿Cuál es la diferencia entre ‘@’ y ‘=’ en el ámbito de aplicación de la directiva en AngularJS?

¿Por qué tengo que usar «{{title}}» con ‘ @ » y «título» con ‘=‘?

@ se une a un local/ámbito de aplicación de la directiva de la propiedad a la valor evaluado de la DOM atributo. Si utiliza title=title1 o title="title1", el valor de DOM atributo «title» es simplemente la cadena title1. Si utiliza title="{{title}}", el valor de la DOM atributo «title» es el valor interpolado de {{title}}, por lo tanto la cadena será cualquiera que sea el padre el ámbito de la propiedad «título» que está establecida. Dado que los valores de atributo son siempre cadenas de caracteres, que siempre terminan con una cadena de valor de esta propiedad en el alcance de la directiva cuando se utiliza @.

= se une a un local/ámbito de aplicación de la directiva de la propiedad a un ámbito primario de la propiedad. Así que con =, se utiliza el modelo primario/ámbito de aplicación nombre de la propiedad como el valor de la DOM atributo. Usted no puede utilizar {{}}s con =.

Con @, usted puede hacer cosas como title="{{title}} and then some" — {{title}} es interpolado, a continuación, la cadena», y algunos de ellos» se concatena con ella. El final de la cadena concatenada es de lo local y de la directiva en el ámbito de la propiedad se presenta. (Usted no puede hacer esto con =, sólo @.)

Con @, usted tendrá que utilizar attr.$observe('title', function(value) { ... }) si necesita utilizar el valor en el enlace(ing) de la función. E. g., if(scope.title == "...") no funcionará como se espera. Tenga en cuenta que esto significa que sólo se puede acceder a este atributo de forma asincrónica.
Usted no necesita usar $observe() si sólo utiliza el valor en una plantilla. E. g., template: '<div>{{title}}</div>'.

Con =, usted no necesita utilizar $observar.

Puedo acceder al ámbito primario directamente, sin la decoración de mi elemento con un atributo?

Sí, pero sólo si usted no utiliza una aislar alcance. Quitar esta línea de su directiva

scope: { ... }

y, a continuación, su directiva no va a crear un nuevo ámbito. Se utilizará el ámbito primario. A continuación, puede acceder a todos los padres ámbito de aplicación de las propiedades directamente.

La documentación dice que «a Menudo es deseable para pasar los datos de la aislada alcance a través de una expresión y el ámbito primario», pero que parece funcionar bien con los bidireccional de unión también. ¿Por qué la expresión de la ruta mejor?

Sí, bidireccional de unión permite que el local/directiva alcance y el ámbito primario para compartir datos. «La expresión de unión» permite a la directiva la convocatoria de una expresión (o función) se define por un DOM atributo — y también puede pasar los datos como argumentos a la expresión o función. Por lo tanto, si usted no necesita compartir los datos con los padres-que sólo quiere llamar a una función definida en el ámbito primario: se puede usar el & sintaxis.

Ver también

• Lukas aisladas del ámbito blog (cubre @, =, &)
• dnc253 la explicación de @ y =
• mi blog-como respuesta sobre los ámbitos — el directivas sección (forma en la parte inferior, justo antes de la sección de Resumen) tiene una imagen de un aislado ámbito de aplicación y su ámbito primario — la directiva del ámbito de los usos @ de una propiedad y = por otro
• ¿Cuál es la diferencia entre & vs @ y = en angularJS

Hay una gran cantidad de respuestas aquí, pero me gustaría ofrecer mi punto de vista sobre las diferencias entre @, =, y & de unión que demostró ser útil para mí.

Los tres enlaces son formas de transmitir los datos desde su ámbito primario de su directiva aislado de alcance a través de los atributos del elemento:

1. @ enlace para pasar las cadenas.
   Estas cadenas de apoyo {{}} expresiones para los valores interpolados.
   Por ejemplo:
   . El interpolado de la expresión se evalúa en contra de
   la directiva de padres de alcance.

2. = enlace es bidireccional modelo de enlace. El modelo en el ámbito primario
   está vinculado a la modelo en la directiva del aislado alcance. Los cambios
   un modelo afecta a la otra, y viceversa.

3. & enlace para pasar de un método en su directiva, por lo que
   puede ser llamado dentro de su directiva. El método es pre-atado a
   la directiva de padres de alcance, y admite argumentos. Por ejemplo, si el método es hola(nombre), en el ámbito primario, a continuación, en
   para ejecutar el método desde el interior de su directiva, debe
   llame a $scope.hola({nombre:’mundo’})

Me parece que es más fácil recordar estas diferencias refiriéndose al ámbito de enlaces por un corto descripción:

• @ Atributo de cadena de unión
• = De dos vías modelo de enlace
• & Método de devolución de llamada de unión

Los símbolos también hacen que sea más clara de cuál es el alcance de la variable que representa dentro de su aplicación de la directiva:

• @ cadena
• = modelo
• & método

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

1. =
2. @
3. &

La = significa bi-direccional de la unión, por lo que una referencia a una variable para el ámbito primario. Esto significa que, cuando cambia la variable en la directiva, será cambiado en el ámbito primario así.

@ significa que la variable será copiado (clonado) en la directiva.

Hasta donde yo sé, <pane bi-title="{{title}}" title="{{title}}">{{text}}</pane> debe trabajar demasiado. bi-title recibirá el ámbito primario valor de la variable, que puede ser cambiado en la directiva.

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

Si quieres ver más de 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 crear los enlaces de ningún tipo. Usted simplemente está recibiendo la palabra que pasa como una cadena

= 2 forma de unión

• los cambios realizados desde el controlador se refleja en la referencia que se mantiene por la directiva, y vice-versa

& Este se comporta de una forma un poco diferente, porque el ámbito obtiene una función que devuelve el objeto que se aprobó en. Estoy asumiendo que esto era necesario para hacer que funcione. El violín debe dejar esto en claro.

• Después de llamar a esta función de captador, el objeto resultante se comporta como sigue:
  • si un función se aprobó: a continuación, se ejecuta la función en el padre (controlador) de cierre cuando se llama
  • si un no la función fue pasado: simplemente obtener una copia local de un objeto que no tiene enlaces

Este violín debe demostrar cómo funcionan. Preste especial atención al ámbito de las funciones con get... en el nombre para poder entender mejor lo que quiero decir acerca de &

Hay tres formas en que ámbito se puede agregar en la directiva:

1. Ámbito primario: Este es el ámbito de la herencia.

La directiva y sus padres(o controlador de la directiva dentro del cual se encuentra) el alcance es el mismo.
Así que los cambios realizados en el ámbito de las variables dentro de la directiva se reflejan en el controlador principal así. No es necesario especificar como es el predeterminado.

1. Niño alcance: directiva crea un ámbito secundario que se hereda de los padres ámbito si se especifica el ámbito de aplicación de la variable de la directiva como verdadero.

Aquí, si cambia el alcance de las variables dentro de la directiva, no se reflejan en el ámbito primario, pero si se cambia la propiedad de un alcance variable, que se refleja en el ámbito primario, que modificó el ámbito de aplicación variable de los padres.

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.
        }
    };
});

1. Aislado ámbito: se utiliza cuando se desea crear el ámbito que no se heredan desde el controlador de alcance.

Esto ocurre cuando se está creando plugins como este hace que la directiva genérica, ya que puede ser colocado en cualquier HTML y no se ve afectado por su ámbito primario.

Ahora, si usted no quiere ningún tipo de interacción con el ámbito primario, entonces usted puede especificar el ámbito como un objeto vacío. como,

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

Principalmente, este no es el caso, ya que necesitamos algún tipo de interacción con el ámbito primario, por lo que queremos que algunos de los valores/cambios para pasar a través.
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 controlador ámbito de aplicación se refleja en el ámbito de aplicación de la directiva, pero si se modifica el valor en el ámbito de aplicación de la directiva, el controlador de alcance variable no se vean afectadas.

@ siempre espera que el asignado el atributo de ser una expresión. Esto es muy importante, porque para hacer el prefijo «@» trabajo, tenemos que envolver el valor del atributo dentro de {{}}.

= es bidireccional por lo que si cambia la variable en el ámbito de aplicación de la directiva, el controlador de alcance variable se ve afectado así

& se utiliza para enlazar controlador ámbito de aplicación del método, de modo que, si es necesario podemos llamar de la directiva

La ventaja aquí es que el nombre de la variable no necesita ser el mismo en el controlador de alcance y ámbito de aplicación de la directiva.

Ejemplo, la directiva ámbito de una variable «dirVar», que se sincroniza con la variable «contVar» del controlador de alcance. Esto le da una gran cantidad de energía y la generalización de la directiva como un controlador puede sincronizar con la variable v1, mientras que otro controlador usando la misma directiva puede pedir dirVar para sincronizar con la variable v2.

A continuación es 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(nota la diferencia @ y =):

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

Aquí es un enlace para el blog, que lo describe muy bien.

Simplemente podemos usar:-

1. @ :- para la Cadena de valores de una forma de enlace de Datos. en una forma de enlace de datos sólo puede pasar alcance el valor de la directiva

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

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

EDITAR

En nuestro Componente definición de Angular de la versión 1.5 de Y sobre

hay cuatro diferentes tipos de enlaces:

1. = Enlace de datos bidireccional :- si cambiamos el valor,actualización automática de

2. < una forma de unión :- cuando sólo queremos leer un parámetro de un ámbito primario y no actualizarlo.

3. @ esto es para Parámetros de Cadena de

4. & esto es para devoluciones de llamada en caso de que el componente debe a la salida de algo a su padre ámbito

He creado un pequeño archivo HTML que contiene Angular código que muestra 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>

La = manera es 2-forma de unión, lo que le permite tener vivir cambios en el interior de su directiva. Cuando alguien cambia esa variable fuera de la directiva, tendrá que cambiar los datos en el interior de su directiva, pero @ manera no es dos formas de unión. Funciona como Texto. Se unen una vez, y usted tendrá sólo su valor.

Para obtener más claramente, usted puede utilizar este gran artículo:

AngularJS Ámbito de aplicación de la Directiva ‘@’ y ‘=’

Esta pregunta ya ha sido golpeado hasta la muerte, pero voy a compartir esto de todos modos en caso de que alguien ahí afuera está luchando con el horrible caos que es AngularJS ámbitos. Esto cubrirá =, <, @, & y ::. La escritura completa puede encontrarse aquí.

= establece en los dos sentidos de unión. El cambio de la propiedad en el padre tendrá como resultado un cambio en el niño, y viceversa.

< establece una forma de unión, de padre a hijo. El cambio de la propiedad en el padre tendrá como resultado un cambio en el niño, pero cambiando el niño de la propiedad no afectará a la propiedad parent.

@ va a asignar al niño a la propiedad de la cadena de valor de la etiqueta de atributo. Si el atributo contiene una expresión, el niño de las actualizaciones de la propiedad cuando 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í, la description de la 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 primario.

& es un poco complicado, y de hecho no parece haber ninguna razón de peso para utilizar. Permite evaluar una expresión en el ámbito primario, la sustitución de los parámetros de las variables a partir de que el niño alcance. 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'}) evaluará a 5 + 10 + 'xyz' y el componente que se va a representar como:

<div>15xyz</div>

Cuando querríamos utilizar esta complicada la funcionalidad? & es a menudo utilizado por las personas para pasar a que el niño alcance una función de devolución de llamada en el ámbito primario. En realidad, sin embargo, el mismo efecto se puede lograr mediante el uso de ‘<‘ para pasar a la función, que es más sencilla y evita la incómoda llaves sintaxis para pasar parámetros ({myVar:5, myOtherVar:'xyz'}). Considerar:

De 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: '&'
  }
});

De 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 matrices) se pasa por referencia a que el niño alcance, no se copian. Lo que esto significa es que incluso si es una forma de unión, se está trabajando con el mismo objeto en ambos el padre y el hijo alcance.

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

Enlace(inicialización) utilizando ::

[Documento oficial]

Las versiones posteriores de AngularJS introducir la opción de disponer de un enlace, en el que el niño alcance de la propiedad se actualiza sólo una vez. Esto mejora el rendimiento mediante la eliminación de la necesidad de ver el padre de la propiedad. La sintaxis es diferente de la anterior; para declarar un enlace, agregar :: en frente de la expresión en el componente de etiqueta:

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

Esto va a propagar el valor de tagline para que el niño alcance sin el establecimiento de una vía o de dos vías de enlace. Nota: si tagline es inicialmente undefined en el ámbito primario, angular va a ver hasta que los cambios y, a continuación, hacer un update de la propiedad correspondiente en el niño alcance.

Resumen

La tabla a continuación muestra cómo los prefijos de trabajo dependiendo de si la propiedad es un objeto array, string, etc.

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

= En los casos donde es necesario crear un enlace bidireccional entre el exterior y el alcance de la directiva de aislar alcance puede utilizar el signo igual ( = ).

& ámbito local de la propiedad permite a los consumidores de una directiva para pasar de una función a la que la directiva puede invocar.

Amablemente visite el enlace de abajo que le da una comprensión clara con ejemplos.Me pareció realmente 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 tu ejemplo, usted puede tener acceso al ámbito primario a través de la propiedad $parent. Asumir en el siguiente código, que title se define en el ámbito primario. A continuación, puede acceder 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 es mejor obtenidos mediante el uso de atributos.

Un ejemplo de donde me encontré con el «&» la notación que se utiliza «para pasar los datos de la aislada alcance a través de una expresión y el ámbito primario», útil (y una de dos vías de enlace de datos podría no ser utilizado) se encontraba en una directiva para la representación especial de discbased dentro de un ng-repeat.

<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 borrar y aquí fue útil para adjuntar un deletefunction desde el exterior ámbito a través de &. En el interior del render-directiva parece

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

De 2 vías de enlace de datos es decir, data = "=" no puede ser utilizado como la función de eliminar iba a ejecutar en cada $digest ciclo, lo cual no es bueno, ya que el registro es inmediatamente eliminado y nunca prestados.

He implementado 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 sólo

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

@ y = ver otras respuestas.

Uno gotcha sobre &

TL;DR;

& obtiene expresión (no sólo la función, como en los ejemplos en otras respuestas) de un padre, y lo define 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 la expresión, por el paso de un objeto con las variables.

explicó

& es una referencia de expresión, que significa que si usted pase algo como
<myDirective expr="x==y"></myDirective>

en la directiva de este expr será una función que llama a la expresión, como:

function expr(){return x == y}.

así, en la directiva del html <button ng-click="expr()"></button> va a llamar a la expresión. En js de la directiva sólo $scope.expr() va a llamar a la expresión demasiado.

La expresión será llamado con $scope.x y $scope.y de los padres.

Usted tiene la capacidad de anular los parámetros!

Si uno de ellos por llamar, por ejemplo, <button ng-click="expr({x:5})"></button>

a continuación, la expresión será llamado con el parámetro x y padre del parámetro y.

Usted puede reemplazar ambos.

Ahora que usted conoce, ¿por qué <button ng-click="functionFromParent({x:5})"></button> obras.

Porque simplemente llama a la expresión de los padres (por ejemplo,<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>

<myDirective functionFromParent="function1(x) + z"></myDirective>

con el niño, llame a:

<button ng-click="functionFromParent({x:5, z: 4})"></button>.

o, incluso, con la sustitución de la función:

<button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button>.

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

Ejemplos:

directiva de la plantilla vs llamado código:

padre ha definido $scope.x, $scope.y:

los padres de la plantilla: <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.función 1, $scope.x, $scope.y:

los padres de la plantilla: <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 de $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 «título» con ‘=’?

Cuando se utiliza {{title}} , sólo el ámbito primario valor se pasa a la directiva de la vista y evaluada. Esto se limita a una forma, lo que significa que el cambio no se reflejará en el ámbito primario. Puede usar ‘=’ cuando se quiere reflejar los cambios realizados en el niño la directiva de padres del alcance también. Este es de dos sentidos.

Puedo acceder al ámbito primario directamente, sin la decoración de mi
elemento con un atributo?

Cuando la directiva ha atributo scope en ella ( ámbito de aplicación : {} ), entonces usted no será capaz de acceder ámbito primario directamente. Pero todavía es posible acceder a ella a través ámbito.$de los padres, etc. Si se quita el ámbito de la directiva, se puede acceder directamente.

La documentación dice que «a Menudo es deseable para pasar los datos de la
aislado alcance a través de una expresión y el ámbito primario», pero que
parece funcionar bien con los bidireccional de unión también. ¿Por qué el
la expresión de la ruta mejor?

Depende basada en el contexto. Si desea llamar a una expresión o función con los datos, se utilizar & y si quieres compartir los datos , puede utilizar biderectional forma, el uso de ‘=’

Usted puede encontrar las diferencias entre las múltiples formas de pasar datos a la directiva en el siguiente enlace:

AngularJS – Aislado Ámbitos – @ vs = vs &

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

@ Atributo de cadena de enlace (one way)
= Dos vías modelo de enlace
& método de devolución de llamada de unión

@ une un local/ámbito de aplicación de la directiva de la propiedad para el valor evaluado de la DOM atributo.
= se une a un local/ámbito de aplicación de la directiva de la propiedad a un ámbito primario de la propiedad.
& enlace para pasar de un método en su directiva, por lo que puede ser llamado dentro de su directiva.

@ Atributo de cadena de unión
= Dos vías modelo de enlace
& método de devolución de llamada de unión