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

发布时间：2020-12-17 09:52:53 所属栏目：安全来源：网络整理

导读：具有以下指令 function directive() { return { template: '{{foo.name}}',controller: ctrl,controllerAs: 'foo' }}function ctrl($attrs) { this.name = $attrs.name;} 这在一个模板中： directive name="1" /directive name="2" / 为什么我看到以下输出：

具有以下指令

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

？

选项controllerAs：’foo’执行以下操作：

$scope.foo = new ctrl()

您的指令未指定范围,这意味着您的指令使用其父级($parentScope)的范围.在您的情况下,两个指令实例使用相同的父范围.所以这两个指令：

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

工作喜欢：

>< directive name =“1”/&gt ;: $parentScope.foo = new ctrl().在控制器内：$parentScope.foo.name = 1.
>< directive name =“2”/&gt ;: $parentScope.foo = new ctrl(). (步骤1中的实例被覆盖).在控制器内：$parentScope.foo.name = 2.
所以最后两个指令是指在第二个控制器实例上定义的相同名称.

解决方案：使用隔离范围为@Michelem mentions.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!