AngularJS access parent scope from child controller
我用
我有一个使用父/子嵌套控制器的场景。我使用
我试过注入$scope然后使用
有人能提供建议吗?
如果您的HTML如下所示,您可以这样做:
1 |
然后您可以访问父作用域,如下所示
1 2 3 4 5 6 7 | function ParentCtrl($scope) { $scope.cities = ["NY","Amsterdam","Barcelona"]; } function ChildCtrl($scope) { $scope.parentcities = $scope.$parent.cities; } |
如果要从视图访问父控制器,必须执行以下操作:
1 | {{$parent.property}} |
见jsfiddle:http://jsfiddle.net/2R728/
更新
实际上,由于您在父控制器中定义了
1 2 3 4 5 6 7 | function ParentCtrl($scope) { $scope.cities = ["NY","Amsterdam","Barcelona"]; } function ChildCtrl($scope) { $scope.parentCities = $scope.cities; } |
AngularJS文档使用这种方法,在这里您可以阅读更多关于
另一个更新
我认为这是对原始海报的更好的回答。
HTML
1 | [cc]{{cc.parentCities | json}} |
1 | {{pc.cities | json}} |
< /代码>
JS
1 2 3 4 5 6 7 8 9 10 11 | 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; } |
如果使用
1 2 3 4 | function ChildCtrl($scope) { var vm = this; vm.parentCities = $scope.pc.cities; // note pc is a reference to the"ParentCtrl as pc" } |
如您所见,访问
更新小提琴
1 2 3 4 5 6 7 8 9 10 11 12 | 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; } |
1 2 3 4 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"> [cc]{{cc.parentCities | json}} |
1 | {{cc.parentCitiesByScope | json }} |
1 | {{pc.cities | json}} |
< /代码>
我刚检查过
1 | $scope.$parent.someProperty |
为我工作。
它将是
1 | {{$parent.someProperty}} |
为了这个观点。
当使用
1 | var id = $scope.parentCtrl.id; |
其中,
有时您可能需要直接在子范围内更新父属性。例如,需要在子控制器更改后保存父控件的日期和时间。例如jspiddle中的代码
HTML
1 2 3 4 5 6 7 8 | event.date = {{event.date}} <br/> event.time = {{event.time}} <br/> event.date = {{event.date}}<br/> event.time = {{event.time}}<br/> event.date: <input ng-model='event.date'> event.time: <input ng-model='event.time'> |
JS
1 2 3 4 5 6 7 8 9 10 | function Parent($scope) { $scope.event = { date: '2014/01/1', time: '10:01 AM' } } function Child($scope) { } |
您还可以绕过范围继承并将内容存储在"全局"范围中。
如果应用程序中有一个包含所有其他控制器的主控制器,则可以将"挂钩"安装到全局范围:
1 2 3 | function RootCtrl($scope) { $scope.root = $scope; } |
然后,在任何子控制器中,您都可以使用
例子:
1 2 3 4 5 6 7 8 9 10 11 12 | function RootCtrl($scope) { $scope.root = $scope; } function ChildCtrl($scope) { $scope.setValue = function() { $scope.root.someGlobalVar = 'someVal'; } } function OtherChildCtrl($scope) { } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> <p ng-controller="ChildCtrl"> <button ng-click="setValue()">Set someGlobalVar</button> </p> <p ng-controller="OtherChildCtrl"> someGlobalVar value: {{someGlobalVar}} </p> |
超级简单,工作,但不确定为什么……
1 2 3 4 5 6 7 8 9 10 | angular.module('testing') .directive('details', function () { return { templateUrl: 'components/details.template.html', restrict: 'E', controller: function ($scope) { $scope.details=$scope.details; <=== can see the parent details doing this } }; }); |
通过子组件,您可以使用"require"访问父组件的属性和方法。下面是一个例子:
起源:
1 2 3 4 5 6 | .component('myParent', mymodule.MyParentComponent) ... controllerAs: 'vm', ... var vm = this; vm.parentProperty = 'hello from parent'; |
孩子:
1 2 3 4 5 6 7 | require: { myParentCtrl: '^myParent' }, controllerAs: 'vm', ... var vm = this; vm.myParentCtrl.parentProperty = 'hello from child'; |
我想我最近也遇到过类似的窘境
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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 } |
我的设置有点不同,但相同的东西可能仍然有效
也许这是站不住脚的,但你也可以把它们都指向某个外部物体:
1 2 3 4 5 6 7 8 9 10 11 12 | var cities = []; function ParentCtrl() { var vm = this; vm.cities = cities; vm.cities[0] = 'Oakland'; } function ChildCtrl($scope) { var vm = this; vm.cities = cities; } |
这样做的好处是,现在在childctrl中编辑的内容被重新应用到父级中的数据。