He leído el AngularJS documentación sobre el tema cuidadosamente, y luego se fastidió con la directiva. Aquí está el el violín.
Y aquí están algunos relevante de las plantillas:
-
Del HTML:
<pane bi-title="title" title="{{title}}">{{text}}</pane>
-
Desde el panel de la directiva:
scope: { biTitle: '=', title: '@', bar: '=' },
Hay varias cosas que no entiendo:
- ¿Por qué tengo que usar
"{{title}}"
con'@'
y"title"
con'='
? - Puedo acceder al ámbito primario directamente, sin la decoración de mi elemento con un atributo?
- La documentación dice «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?
He encontrado otro violín que muestra la expresión de la solución: http://jsfiddle.net/maxisam/QrCXh/
- Punto justo. Capacidad para investigar y encontrar respuestas es importante.
- stackoverflow.com/questions/14908133/…
- En palabras simples
=
se utiliza en la directiva aislar alcance para habilitar dos vías de enlace y@
no actualizaciones del modelo, sólo se actualiza la Directiva ámbito de los valores. - por qué su violín código en el jsfiddle.net/maxisam/QrCXh no funciona con googleapi –ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js ? El código sólo funciona si puedo usar su cdn –code.angularjs.org/1.0.1/angular-1.0.1.js
- Veo un montón de buenas respuestas a continuación, pero, ¿puede alguien dar un puntero a la oficial angular de la documentación que responde a esta pregunta?
- se trata de un viejo violín, siéntase libre de horquilla y sugieren una edición a la pregunta 🙂
@ 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
otitle="title1"
, el valor de DOM atributo «title» es simplemente la cadenatitle1
. Si utilizatitle="{{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.
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.
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
@
(‘a’) copia el valor de la «Atributo».=
(‘igual’) es equivalente a decir que la clave es igual a su expresión. Esto, al menos, es cómo guardo estrecho.foo="{{1+1}}"
— porque no tenemos dos vías de enlace de datos. El punto que he tratado de hacer en el comentario anterior es que debemos usar = sólo cuando la directiva de las necesidades de enlace de datos bidireccional. El uso de @ o & de otra manera.$observe()
es para los atributos que pueden contener las llaves de enlaces. Con valores estáticos puede no ser necesario.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:
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ónLos 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étodoEn orden de utilidad (para mí de todos modos):
"&"
no admite argumentos (o, más bien, los lugareños) de la forma:callback({foo: "some value"})
, que podría entonces ser utilizado<my-dir callback="doSomething(foo)">
. De lo contrario, buena respuestacallback(argument)
. Que ya no es la misma comocallback
sí mismo.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).
=
no significa Angular espera un JS de expresión, sino que se espera un objeto que requiere de dos vías de enlace de datos. Si el objeto de cambios en la directiva, ámbito primario recibe automáticamente actualizaciones para el objeto, y viceversa.@
evalúa lo que se ha pasado de los padres ámbito de aplicación de la directiva, y la salida es siempre una cadena de la directiva. Una forma de enlace de datos que sólo puede ser visto como una cadena.&
es utilizado para pasar objetos o métodos de la directiva, pero también es una forma de enlace de datos (padre ámbito de aplicación de la directiva).Si quieres ver más de cómo funciona esto con un ejemplo en vivo. http://jsfiddle.net/juanmendez/k6chmnch/
@
obtener como cadena=
2 forma de unión&
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.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:
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.
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,
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,
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:
@ 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:
Y el html(nota la diferencia @ y =):
Aquí es un enlace para el blog, que lo describe muy bien.
Simplemente podemos usar:-
@ :- 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
= :- 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.
& :- 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:
=
Enlace de datos bidireccional :- si cambiamos el valor,actualización automática de<
una forma de unión :- cuando sólo queremos leer un parámetro de un ámbito primario y no actualizarlo.@
esto es para Parámetros de Cadena de&
esto es para devoluciones de llamada en caso de que el componente debe a la salida de algo a su padre ámbitoHe creado un pequeño archivo HTML que contiene Angular código que muestra las diferencias entre ellos:
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: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}}"
, dondemovie
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):Dado
parentVar=10
, la expresiónparentFoo({myVar:5, myOtherVar:'xyz'})
evaluará a5 + 10 + 'xyz'
y el componente que se va a representar como: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
&
:De devolución de llamada utilizando
<
: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: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: sitagline
es inicialmenteundefined
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, quetitle
se define en el ámbito primario. A continuación, puede acceder título como$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.
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
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:
https://jsfiddle.net/rishulmatta/v7xf2ujm
la principal diferencia entre ellos es sólo
@
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ámetroy
.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 casox
.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>
llamadas5 == $scope.y
<button ng-click="expr({x:5, y:6})"></button>
llamadas5 == 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
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.
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.
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