escape - AngularJS: Alcance aislado de directiva: variable de alcance no definida

ng-href angular 4

Question

Por favor, ¿alguien puede explicarme, por attrDir la variable de alcance de attrDir es visible, y oneWay no? Pensé que el scope: {} está aislado.

angular.module(''test'', []);

angular.module(''test'').directive(''attrDir'', attrDir);

function attrDir(){
    return {

        scope: true,

        link: function(scope){
          scope.hello = ''attrDir'';
        }

    };
}

angular.module(''test'').directive(''oneWay'', oneWay);

function oneWay(){
    return {

        scope: {
          data: ''<?''
        },

        link: function(scope){
          scope.hello = ''oneWay'';  
        }

    };
}

hello se representará solo en attr-dir .

<attr-dir>
  <span>{{hello}}</span>
</attr-dir>
<one-way>
  <span>{{hello}}</span>
</one-way>

Aquí hay un plunker: https://plnkr.co/edit/2CM4vVRshWuJvaBj2q8T?p=preview

Gracias.

Answer 1

Ambos ámbitos: verdadero y alcance: {} creará un ámbito hijo para la directiva. Pero,

scope: true heredará prototípicamente las propiedades de la matriz (digamos el controlador al que pertenece la directiva) donde asscope: {} no heredará las propiedades de la matriz y, por lo tanto, se llamará aislado

Como oneWay es una directiva de ámbito aislado y no está pasando el saludo, no está definido en el HTML.

Answer 2

Porque está implementando enlaces de componentes en directiva.

El símbolo <indica enlaces unidireccionales que están disponibles desde 1.5.

Si desea mostrar el hello en one-way componente de one-way debe cambiar la implementación como se indica a continuación:

HTML

 <one-way hello="$ctrl.hello">
      <span>{{$ctrl.hello}}</span>
    </one-way>

JS

angular.module(''test'').component(''oneWay'', {
  bindings:{
    hello:''=''
  },
  controller: function() {
    this.hello = ''oneWay'';
  }
});

Manifestación

plnkr

Answer 3

Primero, lo que estás observando no tiene nada que ver con < binding.

El problema es que la expresión {{hello}} dentro de ambas directivas no forma parte de la plantilla de estas directivas. Y para tales elementos las reglas para enlaces son diferentes.

Angular crea automáticamente funciones de enlace para expresiones {{hello}} . Pero los ámbitos en los que se evalúan estas funciones de enlace son diferentes en sus casos.

Lo que probablemente esperabas era esto:

            rootScope
         /             /
        /               /
attr-dir-new-scope  one-way-isoloate-scope
      /                   /
     /                     /
{{hello}}               {{hello}}

Sin embargo, de acuerdo con este comentario en la fuente :

// Solo pasamos el alcance aislado, si la directiva aislada tiene una plantilla,
// de lo contrario, los elementos secundarios no pertenecen a la directiva de aislamiento.

la verdadera imagen es esta:

             root scope
         /             /    /
        /               /    /
attr-dir-new-scope       /    one-way-isoloate-scope
      /                   /
     /                     /
{{hello}}               {{hello}}

Por lo tanto, en su ejemplo, la primera directiva <attr-dir> no crea un alcance aislado, sino que crea un nuevo ámbito, por lo que cuando se vincula angular pasa este nuevo ámbito a la función de enlace de su directiva:

link: function(scope){
     scope.hello = ''attrDir'';
}

y a la función de enlace creada para la expresión {{hello}} . Es por eso que cuando agrega un valor en su función de vinculación, está disponible en la función de vinculación de expresiones.

Pero su segunda directiva <one-way> crea un alcance aislado y de acuerdo con el comentario que mencioné anteriormente, la función de vinculación de la directiva obtiene un alcance aislado como debería, pero la función de enlace de la expresión recibe un alcance diferente (ámbito raíz en su ejemplo ) Entonces estás agregando valor de hello en diferentes ámbitos. Es por eso que el valor no está definido.

Answer 4

Si el alcance no se especifica, es un alcance compartido. Si el alcance se especifica como verdadero, es ámbito heredado. Si el alcance se especifica con llaves, es un alcance aislado.

La mejor forma de visualizar los ámbitos es mediante el uso de instrucciones console.log en las funciones de enlace de ese modo,

link: function(scope) {          
      scope.hello = ''attrDir'';
      console.log(''scope in attrDir: '', scope);
    }

    link: function(scope) {          
          scope.hello = ''oneWay'';
          console.log(''scope in oneWay: '', scope);
        }

Si abre las herramientas de desarrollador, verá que la primera directiva hereda su alcance principal en su prototipo

__proto__:Scope 

mientras que el segundo es un objeto con su propio alcance (mediante el uso de llaves le dio un alcance aislado)

__proto__:Object