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

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示例,它在同一个元素上设置两个控制器.

Answer 1

这是不可能的,因为ng-controller为当前元素创建了隔离范围.所以这是不可能的.因此,同一元素上不能有两个孤立的范围.

您需要将代码更改为:

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

在任何html标记中都具有相同的名称属性也无效.