javascript - Angular : How to access Parent's Named Controller inside Javascript files and vice versa?

Question

我最近一直在使用命名 Controller ，它比使用传统的 $scope 变量更好。在 DOM 内部，访问父 Controller 的属性和功能变得非常容易。下面给出了一个例子。

<div ng-controller="parentCtrl as parent">
    <div ng-controller="childCtrl as child">
        Parent age is {{ parent.age }}
        Child age is {{ child.age }}
    </div>
</div>

我想知道如何在 angular 的 javascript 文件中使用相同的命名 Controller 。有点像下面提到的。

angular.controller('childCtrl',function(...) {
    var vm = this;
    this.age = 24;
    console.log(parent.age);
});

我知道在使用之前必须先注入(inject)parent。在我的项目中，我将 RequireJS 与 UI Router 一起使用，因此它完全避免了 angular.controller 和其他此类构造。任何人都可以在 Plain vanilla Angular 中或在 RequireJS 的帮助下给我一个解决方案吗？

Answer 1

我的 goto 解决方案是使用 $scope 变量来访问父范围。

app.controller('MainCtrl', function() {
  this.name = 'from parent';
});

app.controller('ChildCtrl', function($scope) {
  this.name = $scope.parent.name;
});

Here is a plunker with the full example

在 Controller 之间共享数据时使用更好的设计 Angular services是更好的解决方案。如果您更改 DOM 布局并移动子控件，则应用程序可能会中断。通过使用服务， Controller 独立于 DOM 布局。