在同一元素上使用 "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 在同一个元素上设置两个控制器。

Answer 1

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

您需要将代码更改为：

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

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