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>
看到jsFiddle： 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中的编辑现在传播回父项中的数据。
