angularjs - ejemplos - ng-href

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

Question

He leído mucho sobre el uso de estos símbolos en la implementación de directivas personalizadas en AngularJS, pero el concepto todavía 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.

Answer 1

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 ámbito de la directiva de tres formas posibles.

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

Answer 2

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 se utiliza la propiedad del scope , 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 mediante 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 está algo extendida 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.

Answer 3

La documentación de AngularJS sobre directivas está bastante bien escrita sobre el significado de 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 su padre.

• 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 de "aislamiento" 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}

Answer 4

> no está en la documentación.

< es para enlace unidireccional.

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

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

& vinculante 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.

Answer 5

< enlace unidireccional

= enlace bidireccional

& función vinculante

@ pase solo cadenas