我们可以在同一个div中使用多个控制器吗？

Question

如何在同一个div元素中使用两个不同的控制器？

如何从子控制器内部访问父控制器模型数据？

例如

<div ng-controller="abc">
    <div ng-controller="def"><span>{{name}}</span></div>
</div>

假设模型name在控制器abc中，那么如何访问它的值？

Answer 1

AngularJS会自动从第一个$scope向父级查找，直到$rootScope找到匹配name的属性。 因此，为了回答您的问题，如果控制器def没有名为name的属性，则它已经可见。否则，您应该使用：

{{$parent.name}}

在您的HTML代码中

Answer 2

执行此操作的正确方法是使用别名。见Plunker

在你的HTML中，它看起来像

<div ng-controller="Ctrl as Alias">
    {{Alias.foo}}

在你的javascript中它看起来像

function Ctrl(){
    this.foo = "bar"
}