问题描述
我已经设置了使用数据-NG-控制器=xyzController为VM我控制器
我与父/子嵌套控制器的场景。我没有问题,使用 $ parent.vm.property
访问嵌套HTML父属性,但我无法弄清楚如何从我的孩子控制器中访问parent属性。
我已经试过注射$范围,然后用 $范围。$ parent.vm.property
,但这不是工作?
任何人都可以提供建议?
如果你的HTML像下面你会做这样的事情:
< DIV NG控制器=ParentCtrl>
< DIV NG控制器=ChildCtrl>
< / DIV>
< / DIV>
然后就可以按如下方式访问父范围
函数ParentCtrl($范围){
$ scope.cities =NY,阿姆斯特丹,巴塞罗那];
}功能ChildCtrl($范围){
。$ scope.parentcities = $ $范围parent.cities;
}
如果您想从您的视图访问父控制器,你必须做这样的事情:
< DIV NG控制器=xyzController为VM>
{{$ parent.property}}
< / DIV>
请参阅的jsfiddle:
更新
事实上,因为你在父控制器定义的城市
您的孩子控制器将继承所有范围的变量。所以theoritically你不必叫 $父
。上述例子也可写成如下:
函数ParentCtrl($范围){
$ scope.cities =NY,阿姆斯特丹,巴塞罗那];
}功能ChildCtrl($范围){
$ scope.parentCities = $ scope.cities;
}
文档使用这种方法的AngularJS,这里你可以阅读更多关于 $范围
。
另一个更新
我认为这是一个更好的答案,原来的海报。
HTML
< DIV NG-NG应用程序控制器=ParentCtrl作为PC>
< DIV NG控制器=ChildCtrl为CC>
< pre> {{cc.parentCities | JSON}}< / pre>
< pre> {{pc.cities | JSON}}< / pre>
< / DIV>
< / DIV>
JS
函数ParentCtrl(){
VAR VM =这一点;
vm.cities =NY,阿姆斯特丹,巴塞罗那];
}功能ChildCtrl(){
VAR VM =这一点;
ParentCtrl.apply(VM,参数); //继承父控件 vm.parentCities = vm.cities;
}
如果您使用控制器
方法,你也可以访问父范围如下:
函数ChildCtrl($范围){
VAR VM =这一点;
vm.parentCities = $ scope.pc.cities; //注意PC是把ParentCtrl作为PC参考
}
正如你可以看到有在获得许多不同的方式 $范围
。
函数ParentCtrl(){\r
VAR VM =这一点;\r
vm.cities =NY,阿姆斯特丹,巴塞罗那];\r
}\r
\r
功能ChildCtrl($范围){\r
VAR VM =这一点;\r
ParentCtrl.apply(VM,参数);\r
\r
vm.parentCitiesByScope = $ scope.pc.cities;\r
vm.parentCities = vm.cities;\r
}\r
\r
&LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.20/angular.min.js\"></script>\r
&LT; DIV NG-NG应用程序控制器=ParentCtrl作为PC&GT;\r
&LT; DIV NG控制器=ChildCtrl为CC&GT;\r
&LT; pre&GT; {{cc.parentCities | JSON}}&LT; / pre&GT;\r
&LT; pre&GT; {{cc.parentCitiesByScope | JSON}}&LT; / pre&GT;\r
&LT; pre&GT; {{pc.cities | JSON}}&LT; / pre&GT;\r
&LT; / DIV&GT;\r
&LT; / DIV&GT;
\r
I've set up my controllers using data-ng-controller="xyzController as vm"
I have a scenario with parent / child nested controllers. I have no problem accessing parent properties in the nested html by using $parent.vm.property
, but I cannot figure out how to access the parent property from within my child controller.
I've tried injecting $scope and then using $scope.$parent.vm.property
, but this isn't working?
Can anyone offer advice?
If your HTML is like below you could do something like this:
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
</div>
</div>
Then you can access the parent scope as follows
function ParentCtrl($scope) {
$scope.cities = ["NY", "Amsterdam", "Barcelona"];
}
function ChildCtrl($scope) {
$scope.parentcities = $scope.$parent.cities;
}
If you want to access a parent controller from your view you have to do something like this:
<div ng-controller="xyzController as vm">
{{$parent.property}}
</div>
See jsFiddle: http://jsfiddle.net/2r728/
Update
Actually since you defined cities
in the parent controller your child controller will inherit all scope variables. So theoritically you don't have to call $parent
. The above example can also be written as follows:
function ParentCtrl($scope) {
$scope.cities = ["NY","Amsterdam","Barcelona"];
}
function ChildCtrl($scope) {
$scope.parentCities = $scope.cities;
}
The AngularJS docs use this approach, here you can read more about the $scope
.
Another update
I think this is a better answer to the original poster.
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;
}
If you use the controller as
method you can also access the parent scope as follows
function ChildCtrl($scope) {
var vm = this;
vm.parentCities = $scope.pc.cities; // note pc is a reference to the "ParentCtrl as pc"
}
As you can see there are many different ways in accessing $scopes
.
Updated fiddle
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>
这篇关于从子控制器angularjs访问父范围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!