var cities = [];
function ParentCtrl() {
var vm = this;
vm.cities = cities;
vm.cities[0] = 'Oakland';
}
function ChildCtrl($scope) {
var vm = this;
vm.cities = cities;
}
<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;
}
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
}
我的设置有点不同,但同样的事情应该仍然可行
45
从子组件中,您可以使用“require”访问父组件的属性和方法 . 这是一个例子:
家长:
.component('myParent', mymodule.MyParentComponent)
...
controllerAs: 'vm',
...
var vm = this;
vm.parentProperty = 'hello from parent';
儿童:
require: {
myParentCtrl: '^myParent'
},
controllerAs: 'vm',
...
var vm = this;
vm.myParentCtrl.parentProperty = 'hello from child';
595
超级容易和工作,但不知道为什么....
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
}
};
});
9 回答
也许这是蹩脚的,但你也可以将它们指向一些外部对象:
这里的好处是ChildCtrl中的编辑现在传播回父级中的数据 .
如果您的HTML如下所示,您可以执行以下操作:
然后,您可以按如下方式访问父作用域
如果要从视图中访问父控制器,则必须执行以下操作:
见jsFiddle:http://jsfiddle.net/2r728/
Update
实际上,由于您在父控制器中定义了
cities
,因此子控制器将继承所有范围变量 . 所以理论上你不必打电话$parent
. 上面的例子也可以写成如下:AngularJS文档使用这种方法,here你可以阅读更多关于
$scope
的信息 .Another update
我认为这是原始海报的更好答案 .
HTML
JS
如果使用
controller as
方法,还可以按如下方式访问父作用域如您所见,访问
$scopes
有许多不同的方法 .更新了小提琴
我刚检查过
适合我 .
它会
为了观点 .
当您使用
as
语法(如ParentController as parentCtrl
)来定义控制器,然后在 child controller 中访问父作用域变量时,请使用以下命令:其中
parentCtrl
是使用as
语法的父控制器的名称,id
是在同一控制器中定义的变量 .有时您可能需要直接在子范围内更新父属性 . 例如需要在子控制器更改后保存父控件的日期和时间 . 例如Code in JSFiddle
HTML
JS
您还可以绕过范围继承并将事物存储在“全局”范围内 .
如果应用程序中有一个包含所有其他控制器的主控制器,则可以在全局范围内安装“钩子”:
然后在任何子控制器中,您可以使用
$scope.root
访问"global"范围 . 您在此处设置的任何内容都将全局可见 .例:
我相信最近我有类似的窘境
我的设置有点不同,但同样的事情应该仍然可行
从子组件中,您可以使用“require”访问父组件的属性和方法 . 这是一个例子:
家长:
儿童:
超级容易和工作,但不知道为什么....