dwóch dyrektyw dzielą ten sam kontroler

Question

uwzględniając następującą dyrektywę

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

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

i to w szablonie:

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

Dlaczego widzę następujący wynik:

2 
2 

zamiast z

1 
2 

?

Answer 1

Opcja controllerAs: 'foo' sposób następujący:

$scope.foo = new ctrl() 

Twój dyrektywa nie robi” t należy podać wartość scope, co oznacza, że ​​dyrektywa korzysta z zakresu od obiektu nadrzędnego ($parentScope). W twoim przypadku dwie instancje dyrektyw używają tego samego zakresu nadrzędnego:. Tak więc dwie dyrektywy:

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

pracować jak:

1. <directive name="1" />: $parentScope.foo = new ctrl(). Wewnątrz kontrolera: $parentScope.foo.name = 1.
2. <directive name="2" />: $parentScope.foo = new ctrl(). (instancja w kroku 1 zostaje nadpisana). Wewnątrz kontrolera: $parentScope.foo.name = 2.

W końcu obie dyrektywy odnoszą się do tego samego name zdefiniowanego na drugim egzemplarzu kontrolera.

Rozwiązanie: użyj zakresu izolowania jako @Michelem mentions.

Answer 2

Trzeba odizolować zakresu:

JSFiddle

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

Spójrz na @Joy answer dla wyjaśnienia