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()

您的指令没有指定scope，这意味着您的指令使用其父级（$parentScope）的范围。 在您的情况下，两个指令实例使用相同的父范围。所以这两个指令：

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

工作如下：

<directive name="1" />：$parentScope.foo = new ctrl()。控制器内部：$parentScope.foo.name = 1。
<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了解

两个指令共享同一个控制器

2 个答案: