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/

InformationsquelleAutor iwein | 2012-12-27

18 Comentarios

  1. 1145

    ¿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

    • Eh, esto es realmente un comportamiento extraño, especialmente cuando no se utiliza la interpolación y tratando de pasar una cadena. Al parecer, la solicitud de extracción de hecho ha sido fusionado en las versiones de desarrollo y es en 1.1.5 y 1.2.0 RC construye. Bueno sobre ellos para la fijación de este muy poco intuitivo comportamiento!
    • Escrito ‘@’ o ‘=’ es mucho más clara, a continuación, escribir «eval-dom» o «padre-ámbito de aplicación» o cualquier otro texto legible. Buena decisión de diseño.
    • @ (‘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.
    • ¿Estás seguro de que = es sólo para los padres-propiedades de ámbito? Cualquier expresión parece el trabajo no sólo de los padres-ámbito de aplicación de las propiedades.
    • bien, puesto que = establece dos vías de enlace de datos, la expresión debe ser algo asignables, y no sólo «cualquier» expresión.
    • Yo no lo creo – aquí es un CodePen mostrando la expresión 1+1 pasa a una = vinculante, y el resultado es 2: codepen.io/anon/pen/bDecJ
    • sí que funciona, pero @ sería más apropiado-con 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.
    • Impresionante, pero ¿alguien puede explicar por qué «$observar» es necesario para la «@» ??? EDIT: no importa, no veo el enlace
    • Por extraño que si puedo agregar una ‘@’ propiedad de alcance puedo acceder a el valor de la corriente en mi función de enlace bien. No parece ser una necesidad para $observar. Podría usted por favor aclarar?
    • Ah – al parecer $observe() es para los atributos que pueden contener las llaves de enlaces. Con valores estáticos puede no ser necesario.
    • Sería excesivo pedir Angular 1.5 nuevo «<» one-way tipo de enlace que se añade a este excelente respuesta?

  2. 538

    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. &
    • En realidad, "&" 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 respuesta
    • Debe ser aceptado respuesta. Aquí está un artículo conciso con la misma información, pero con el agregado de los ejemplos de código: umur.io/…
    • Lo que deduzco es que el «@» es evaluado antes de ser pasados a la directiva, mientras que los «&» sólo crea una cerradura cuya evaluación final se activa más tarde dentro de la directiva. Estoy en lo cierto?
    • & NO es un «método de devolución de llamada de unión», es Angular de la expresión de unión. Un especial, pero no es el único ejemplo es la expresión callback(argument). Que ya no es la misma como callback sí mismo.
    • Mientras me encantó cómo definitiva el ranking más alto fue la respuesta, creo que este es uno hizo una más útil impacto y después de leer esto uno entendí la respuesta anterior mucho más.
    • Estoy de acuerdo con el comentario de arriba, esta respuesta es más clara, definitiva y útil a la pregunta. En él se explica con bastante detalle que se puede ir y uso de la información.
    • Esta respuesta es excelente y elegante documentos en el ámbito de las características de la $directiva. Sin embargo, Mark Rajcoks respuesta cabe la pregunta original más de cerca. No, no es motivo suficiente para anular para que uno como el aceptado respuesta. Al parecer es gratificante leer más que la respuesta a ESO. Todo está bien 🙂
    • El uso de <ol> para una lista ordenada 🙂
    • Muy bonita respuesta, finalmente lo consiguió 🙂 Gracias!

  3. 64

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

    • Sí, que la parte I, consulte el violín en la pregunta. Pero, ¿qué acerca de las partes que son claras?
    • la cosa es que {{}} no funciona con =. = no se evalúa, pero la cadena se toma como el nombre de la propiedad como es. Gracias por la respuesta!
    • No creo que = es sólo para las variables en el ámbito primario. Funciona con cualquier expresión (por ejemplo, 1+1).
    • tienes razón que se evalúa las expresiones. en mi humilde opinión esto es realmente extraño y yo no lo uso de esa manera. Es este tipo de trucos que hacen que la directiva de ámbitos tan difícil de entender para mí en primer lugar.
    • Soy yo el único que piensa que esta respuesta es incorrecta ! ‘=’ significa angular esperar una expresión javascript y va a hacer un bidirectionnal asignación si un alcance variable se pasa. Mientras que @ significa angular esperar una Cadena y que todos. De hecho, es cierto que si usas @ en combinaison con {{}} va a clonar el valor de la variable. Pero no es la definición de @ !
    • Yo estaría de acuerdo: = 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).

  4. 39

    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>"
        };
    });
    • Hay varios ejemplos vinculados en la pregunta y la respuesta. Lo que hace este complemento?
    • añade claridad. Si yo pudiera comprender y asimilar completa de ejemplos, no iba a necesitar de este sitio.
    • juan, tal vez de corregir su error de ortografía? ‘transclude’ está mal escrito. mejor aún, eliminar (y todo lo demás, como ‘reemplazar’) que no contribuyen directamente al problema por lo que su solución es aún más sencillo y claro. +1 para el ejemplo.
    • gracias @AnikISlamAbhi para la edición. Me gustaría contribuir más y me alegro de que para algunas de mis muestras útiles. Ese es el propósito principal.
    • Ejemplo incompleta. En su demostración, solo va a cambiar la bi-direccional de valor. Tu no están aún tratando de cambiar el valor que se ha aislado alcance. Por lo tanto, no debidamente demostrado cómo el ámbito de las obras en las directivas.
    • ¿Qué se puede esperar? Que es de hace casi cuatro años, avanzar y adaptarse a los Angular 5!
    • Ya han publicado lo que me esperaba. Mi amigo, a veces tienes que trabajar en proyectos antiguos. Su cliente no siempre estará dispuesto a pagar por todo el marco de la actualización, cuando todo lo que quiero es que un pequeño cambio en el software.

  5. 38

    @ 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 &

  6. 34

    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.

    • & no es ni «el Comportamiento de unión» ni «Método de unión», es Angular de la expresión de unión.
  7. 20

    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

  8. 12

    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>
  9. 6

    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 ‘=’

  10. 6

    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.

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

  11. 4

    @ á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

  12. 3

    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.

  13. 3

    la principal diferencia entre ellos es sólo

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

    @ 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

  15. 0

    ¿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

  16. 0

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

  17. 0

    @ 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

Dejar respuesta

Please enter your comment!
Please enter your name here