在同一元素上使用"controller as x"的多个 ng 控制器指令

Question

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

像这样：

<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 标记中具有相同的名称属性也是无效的。