Due direttive condividono lo stesso controller

Question

Avere la seguente direttiva

function directive() { 
    return { 
     template: '{{foo.name}}', 
     controller: ctrl, 
     controllerAs: 'foo' 
    } 
} 

function ctrl($attrs) { 
    this.name = $attrs.name; 
} 

e questo in un modello:

<directive name="1" /> 
<directive name="2" /> 

Perché vedo il seguente output:

2 
2 

invece di

1 
2 

?

Answer 1

L'opzione controllerAs: 'foo' effettua le seguenti operazioni:

$scope.foo = new ctrl() 

tuo direttiva doesn' t specificare lo scope, ovvero la direttiva utilizza l'ambito dal suo genitore ($parentScope). Nel tuo caso, le due istanze direttiva utilizzano lo stesso ambito genitore. Così le due direttive:

<directive name="1" /> 
<directive name="2" /> 

lavoro come:

1. <directive name="1" />: $parentScope.foo = new ctrl(). All'interno del controller: $parentScope.foo.name = 1.
2. <directive name="2" />: $parentScope.foo = new ctrl(). (l'istanza nel passaggio 1 viene sovrascritta). All'interno del controller: $parentScope.foo.name = 2.

Quindi, infine, entrambe le direttive si riferiscono allo stesso name definito nella seconda istanza del controller.

Soluzione: utilizzare l'ambito isolato come @Michelem mentions.

Answer 2

si deve isolare il campo di applicazione:

JSFiddle

function directive() { 
    return { 
     scope: {name: '='}, 
     template: '{{foo.name}}', 
     controller: ctrl, 
     controllerAs: 'foo' 
    } 
} 

Guarda @Joy answer per la spiegazione