Две директивы разделяют один и тот же контроллер

Question

Имея следующую директиву

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

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

и это в шаблоне:

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

Почему я вижу следующий вывод:

2 
2 

вместо от

1 
2 

?

Answer 1

Опция controllerAs: 'foo' выполняет следующие действия:

$scope.foo = new ctrl() 

Ваша директива Безразлично» T укажите scope, это означает, что ваша директива использует область действия от ее родителя ($parentScope). В вашем случае два экземпляра директивы используют одну и ту же родительскую область. Так что две директивы:

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

работы, как:

1. <directive name="1" />: $parentScope.foo = new ctrl(). Внутри контроллера: $parentScope.foo.name = 1.
2. <directive name="2" />: $parentScope.foo = new ctrl(). (экземпляр на шаге 1 перезаписывается). Внутри контроллера: $parentScope.foo.name = 2.

Итак, обе директивы относятся к тому же name, определенному на втором экземпляре контроллера.

Решение: использовать область изоляции как @Michelem mentions.

Answer 2

Вы должны изолировать сферу:

JSFiddle

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

Посмотрите на @Joy answer для объяснения