回答:
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
は、親コントローラーで定義したため、子コントローラーはすべてのスコープ変数を継承します。したがって、理論的にはを呼び出す必要はありません$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>
angular.module('app').controller('ParentCtrl', ParentCtrl);
JavaScript
以下を参照してください。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
たった今チェックしました
$scope.$parent.someProperty
私のために働く。
そしてそれは
{{$parent.someProperty}}
ビューのため。
場合によっては、子スコープ内で直接親プロパティを更新する必要があります。たとえば、子コントローラーによる変更後に親コントロールの日付と時刻を保存する必要があります。例: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) {
}
スコープの継承を回避し、「グローバル」スコープに格納することもできます。
アプリケーションに他のすべてのコントローラーをラップするメインコントローラーがある場合は、グローバルスコープに「フック」をインストールできます。
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
}
私の設定は少し異なりましたが、同じものがおそらく機能するはずです
子コンポーネントから、「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';
おそらくこれは不十分ですが、両方を外部オブジェクトに向けることもできます。
var cities = [];
function ParentCtrl() {
var vm = this;
vm.cities = cities;
vm.cities[0] = 'Oakland';
}
function ChildCtrl($scope) {
var vm = this;
vm.cities = cities;
}
ここでの利点は、ChildCtrlでの編集が親のデータに反映されることです。