Uso de los símbolos '@', '&', '=' y '>' en el enlace del alcance de la directiva personalizada: AngularJS

He leído mucho sobre el uso de estos símbolos en la implementación de directivas personalizadas en AngularJS, pero el concepto aún no está claro para mí. Quiero decir, ¿qué significa si uso uno de los valores de alcance en la directiva personalizada?

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

¿Qué estamos haciendo exactamente con el alcance aquí?

Tampoco estoy seguro de si "alcance: '>'" existe en la documentación oficial o no. Se ha usado en mi proyecto.

Editar-1

El uso de "scope: '>'" fue un problema en mi proyecto y se ha solucionado.

En una directiva AngularJS, el alcance le permite acceder a los datos en los atributos del elemento al que se aplica la directiva.

Esto se ilustra mejor con un ejemplo:

<div my-customer name="Customer XYZ"></div>

y la definición de la directiva:

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

Cuando scopese utiliza la propiedad, la directiva está en el modo denominado "alcance aislado", lo que significa que no puede acceder directamente al alcance del controlador principal.

En términos muy simples, el significado de los símbolos vinculantes es:

someObject: '=' (enlace de datos bidireccional)

someString: '@'(pasado directamente o por interpolación con doble notación de llaves {{}})

someExpression: '&'(por ejemplo hideDialog())

Esta información está presente en la página de documentación de la directiva AngularJS , aunque de alguna manera se extiende por toda la página.

El símbolo >no es parte de la sintaxis.

Sin embargo, <existe como parte de los enlaces del componente AngularJS y significa enlace unidireccional.

> No está en la documentación.

< es para enlace unidireccional.

@el enlace es para pasar cadenas. Estas cadenas admiten {{}}expresiones para valores interpolados.

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

& el enlace es para pasar un método al alcance de su directiva para que pueda llamarse dentro de su directiva.

Cuando establecemos el alcance: verdadero en la directiva, Angular js creará un nuevo alcance para esa directiva. Eso significa que los cambios realizados en el alcance de la directiva no se reflejarán en el controlador principal.

< enlace unidireccional

= enlace bidireccional

& función vinculante

@ pasar solo cadenas

Cuando creamos una directiva del cliente, el alcance de la directiva podría estar en un alcance aislado, lo que significa que la directiva no comparte un alcance con el controlador; tanto la directiva como el controlador tienen su propio alcance. Sin embargo, los datos se pueden pasar al alcance de la directiva de tres formas posibles.

1. Los datos se pueden pasar como una cadena usando el @literal de cadena, pasar el valor de la cadena, enlace unidireccional.
2. Los datos se pueden pasar como un objeto usando el =literal de cadena, pasar el objeto, enlace de 2 maneras.
3. Los datos pueden pasarse como una función, el &literal de cadena, llama a la función externa, puede pasar datos de la directiva al controlador.

La documentación de AngularJS sobre directivas está bastante bien escrita sobre lo que significan los símbolos.

Para ser claros, no puedes simplemente tener

scope: '@'

en una definición directiva. Debe tener propiedades para las que se aplican esos enlaces, como en:

scope: {
    myProperty: '@'
}

Le sugiero que lea la documentación y los tutoriales en el sitio. Hay mucha más información que necesita saber sobre ámbitos aislados y otros temas.

Aquí hay una cita directa de la página vinculada anteriormente, con respecto a los valores de scope:

La propiedad del alcance puede ser verdadera, un objeto o un valor falso:

• falso : No se creará ningún alcance para la directiva. La directiva utilizará el alcance de sus padres.

• true: Se creará un nuevo ámbito secundario que hereda prototípicamente de su elemento primario para el elemento de la directiva. Si varias directivas sobre el mismo elemento solicitan un nuevo alcance, solo se crea un nuevo alcance. La nueva regla de alcance no se aplica a la raíz de la plantilla, ya que la raíz de la plantilla siempre obtiene un nuevo alcance.

• {...} (un hash de objeto) : se crea un nuevo ámbito "aislado" para el elemento de la directiva. El alcance 'aislado' difiere del alcance normal en que no hereda prototípicamente de su alcance padre. Esto es útil al crear componentes reutilizables, que no deberían leer o modificar accidentalmente datos en el ámbito principal.

^{Consultado el 13 de febrero de 2017 en https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile # -scope-, con licencia CC-by-SA 3.0}

Tuve problemas para vincular un valor con cualquiera de los símbolos en AngularJS 1.6. No obtuve ningún valor en absoluto, solo undefined, a pesar de que lo hice exactamente de la misma manera que otros enlaces en el mismo archivo que funcionó.

El problema era: mi nombre de variable tenía un guión bajo.

Esto falla:

bindings: { import_nr: '='}

Esto funciona:

bindings: { importnr: '='}

(No estaba completamente relacionado con la pregunta original, pero ese fue uno de los principales resultados de búsqueda cuando lo busqué, así que espero que esto ayude a alguien con el mismo problema).