AngularJS从子控制器访问父范围

我已经build立了我的控制器使用data-ng-controller="xyzController as vm"

我有父/子嵌套控制器的scheme。 我没有问题,通过使用$parent.vm.property访问嵌套的HTML中的父属性,但我不知道如何从我的子控制器访问父属性。

我已经尝试注入$范围,然后使用$scope.$parent.vm.property ,但这不工作?

谁能提供build议?

如果你的HTML如下所示,你可以这样做:

 <div ng-controller="ParentCtrl"> <div ng-controller="ChildCtrl"> </div> </div> 

然后,您可以按如下方式访问父范围

 function ParentCtrl($scope) { $scope.cities = ["NY", "Amsterdam", "Barcelona"]; } function ChildCtrl($scope) { $scope.parentcities = $scope.$parent.cities; } 

如果你想从你的视图访问父控制器,你必须做这样的事情:

 <div ng-controller="xyzController as vm"> {{$parent.property}} </div> 

看到j​​sFiddle: http : //jsfiddle.net/2r728/

更新

实际上,由于您在父控制器中定义了cities ,您的子控制器将inheritance所有范围variables。 所以在理论上你不必打电话给$parent 。 上面的例子也可以写成如下:

 function ParentCtrl($scope) { $scope.cities = ["NY","Amsterdam","Barcelona"]; } function ChildCtrl($scope) { $scope.parentCities = $scope.cities; } 

AngularJS文档使用这种方法, 在这里你可以阅读更多关于$scope

另一个更新

我认为这是对原始海报的更好的回答。

HTML

 <div ng-app ng-controller="ParentCtrl as pc"> <div ng-controller="ChildCtrl as cc"> <pre>{{cc.parentCities | json}}</pre> <pre>{{pc.cities | json}}</pre> </div> </div> 

JS

 function ParentCtrl() { var vm = this; vm.cities = ["NY", "Amsterdam", "Barcelona"]; } function ChildCtrl() { var vm = this; ParentCtrl.apply(vm, arguments); // Inherit parent control vm.parentCities = vm.cities; } 

如果您使用controller as方法,则还可以按如下方式访问父范围

 function ChildCtrl($scope) { var vm = this; vm.parentCities = $scope.pc.cities; // note pc is a reference to the "ParentCtrl as pc" } 

正如你所看到的,访问$scopes有许多不同的方法。

更新小提琴

 function ParentCtrl() { var vm = this; vm.cities = ["NY", "Amsterdam", "Barcelona"]; } function ChildCtrl($scope) { var vm = this; ParentCtrl.apply(vm, arguments); vm.parentCitiesByScope = $scope.pc.cities; vm.parentCities = vm.cities; } 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script> <div ng-app ng-controller="ParentCtrl as pc"> <div ng-controller="ChildCtrl as cc"> <pre>{{cc.parentCities | json}}</pre> <pre>{{cc.parentCitiesByScope | json }}</pre> <pre>{{pc.cities | json}}</pre> </div> </div> 

我刚刚检查过

 $scope.$parent.someProperty 

为我工作。

这将是

 {{$parent.someProperty}} 

为视图。

当你使用语法,如ParentController as parentCtrl ,定义一个控制器,然后访问父控制器variables在子控制器使用以下内容:

 var id = $scope.parentCtrl.id; 

其中parentCtrl是使用as语法的父控制器的名称, id是在同一控制器中定义的variables。

有时您可能需要直接在子范围内更新父属性。 例如需要在子控制器更改后保存父控制的date和时间。 例如JSFiddle中的代码

HTML

 <div ng-app> <div ng-controller="Parent"> event.date = {{event.date}} <br/> event.time = {{event.time}} <br/> <div ng-controller="Child"> event.date = {{event.date}}<br/> event.time = {{event.time}}<br/> <br> event.date: <input ng-model='event.date'><br> event.time: <input ng-model='event.time'><br> </div> </div> 

JS

  function Parent($scope) { $scope.event = { date: '2014/01/1', time: '10:01 AM' } } function Child($scope) { } 

您也可以规避范围inheritance并将其存储在“全局”范围内。

如果您的应用程序中包含所有其他控制器的主控制器,则可以在全局范围内安装一个“挂钩”:

 function RootCtrl($scope) { $scope.root = $scope; } 

然后在任何子控制器中,可以使用$scope.root访问“全局”范围。 你在这里设置的任何东西都将在全球可见。

例:

 function RootCtrl($scope) { $scope.root = $scope; } function ChildCtrl($scope) { $scope.setValue = function() { $scope.root.someGlobalVar = 'someVal'; } } function OtherChildCtrl($scope) { } 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app ng-controller="RootCtrl"> <p ng-controller="ChildCtrl"> <button ng-click="setValue()">Set someGlobalVar</button> </p> <p ng-controller="OtherChildCtrl"> someGlobalVar value: {{someGlobalVar}} </p> </div> 

我相信我最近也有类似的窘境

 function parentCtrl() { var pc = this; // pc stands for parent control pc.foobar = 'SomeVal'; } function childCtrl($scope) { // now how do I get the parent control 'foobar' variable? // I used $scope.$parent var parentFoobarVariableValue = $scope.$parent.pc.foobar; // that did it } 

我的设置有点不同,但同样的事情可能仍然有效

也许这是蹩脚的,但你也可以把它们都指向一些外部对象:

 var cities = []; function ParentCtrl() { var vm = this; vm.cities = cities; vm.cities[0] = 'Oakland'; } function ChildCtrl($scope) { var vm = this; vm.cities = cities; } 

这样做的好处是,ChildCtrl中的编辑现在传播回父项中的数据。