使用"controller as x"的多个ng-controller指令可用于在同一元素上 [英] Multiple ng-controller directives using "controller as x" on the same element

问题描述

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

1. Why isn't it possible in Angular to put two ng-controller directives on the same element and
2. Which are the possible mitigation scenarios for this problem - like custom directives or HTML element nesting with single ng-controller directives to name a couple, but there may be others as well

类似这样的东西:

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

这是一个 JSFiddle示例，该示例在同一元素上设置了两个控制器.

Here's a JSFiddle example that sets two controllers on the same element.

推荐答案

这是不可能的，因为ng-controller为当前元素创建隔离范围.因此这是不可能的.因此，在同一元素上不能有两个孤立的作用域.

This can't be possible since ng-controller creates isolated scope for the current element. So this is not possible. So there can't be two isolated scope on a same element.

您需要将代码更改为:

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

在任何html标记中具有相同的name属性也是无效的.

Also its not valid to have same name attribute in any html tag.

这篇关于使用"controller as x"的多个ng-controller指令可用于在同一元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！