Question

我在我的视图中使用Controller如下：

<body ng-controller="MainCtrl as main">
   <div ng-controller="ChildCtrl as child">
      {{ main.parentValue }} + {{ child.childValue }}
   </div>
</body>

像这样定义我的控制器：

app.controller('MainCtrl', function($scope) {
   this.parentValue = 'Main';
});

app.controller('ChildCtrl', function($scope) {
   this.childValue = 'Child';
   // I want to access the property of the parent controller here
});

ChildCtrl如何设置MainCtrl的名称属性？这里是Plunkr。

使用$ scope表示法，我可以从子控制器访问$ scope.parentValue。如何使用Controller As表示法实现相同的功能？

Answer 1

由于您使用“控制器作为”表示法，因此您可以ChildCtrl使用MainCtrl访问$scope.main，例如$scope.main.name。

请参阅下面的我的代码段。

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  this.name = 'Main';
  this.test = {};
});

app.controller('ChildCtrl', function($scope) {
  this.name = 'Child';
  alert($scope.main.name);
});

<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-controller="MainCtrl as main">
  <div ng-controller="ChildCtrl as child">
    {{ main.name }} + {{ child.name }}
  </div>
</body>

</html>

Answer 2

你不应该混淆＆＃34;控制器为＆＃34;和$范围使用。要更新父作用域中的数据，您可以/应该使用服务。

示例：从任何子控制器中更改页面标题：

app.service("SiteService", function () {
    return {
        title: "Page title";
    }
}


app.controller ("ParentCtrl", function (SiteService) {
    this.site = SiteService;
}

app.controller ("ChildCtrl", function (SiteService) {
    SiteService.title = "New Title";
}

和你的模板

<html ng-app="someApp" ng-controller="ParentCtrl as site">
    <head>
         <title>{{site.title}}</title>
    </head>
</html>

这种方法的主要优点是：将public mutable与私有属性分开。

Answer 3

将数据放在$scope中是实现此目的的有条理的方式。您还可以从服务中设置/获取数据，然后很容易将其包含在任一控制器中。

观看此视频：https://egghead.io/lessons/angularjs-sharing-data-between-controllers

如何使用Controller As表示法访问父属性

3 个答案: