在同一元素上使用“控制器作为 x”的多个 ng 控制器指令

Multiple ng-controller directives using "controller as x" on the same element

本文关键字：控制器 控制器作为 指令 ng 元素      更新时间：2023-09-26
  1. 为什么在 Angular 中不可能将两个ng-controller指令放在同一个元素上，并且
  2. 哪些是此问题的可能缓解方案 - 例如自定义指令或带有单个ng-controller指令的HTML元素嵌套来命名一对，但也可能有其他
    3. 情况

像这样：

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

下面是一个 JSFiddle 示例，它在同一元素上设置两个控制器。

这

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

您需要将代码更改为：

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

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

相关文章：