javascript - 在同一元素上使用 "controller as x"的多个 ng-controller 指令

Question

1. 为什么在 Angular 中不能将两个 ng-controller 指令放在同一个元素上并且
2. 对于这个问题，有哪些可能的缓解方案 - 例如自定义指令或 HTML 元素与单个 ng-controller 指令嵌套等等，但可能还有其他情况还有

像这样:

<div ng-controller="ControllerOne as c1" ng-controller="ControllerTwo as c2">
    {{ c1.value }}, {{ c2.value }}
</div>

这是一个 JSFiddle example在同一个元素上设置两个 Controller 。

Answer 1

这是不可能的，因为 ng-controller 为当前元素创建了独立的范围。所以这是不可能的。因此，同一个元素上不能有两个独立的作用域。

您需要将代码更改为:

<div ng-controller="ControllerOne as c1">
    <div ng-controller="ControllerTwo as c2">
        {{ c1.value }}, {{ c2.value }}
    </div>
</div>

在任何 html 标签中具有相同名称属性也是无效的。