Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

AngularJS1.x その0008 コントローラーを入れ子にして、親子関係を作る

参考にさせて頂いたページ

AngularJSのControllerをネストしたときのスコープ - hokaccha.hamalog v2

ng-app.jsの記述内容

例として以下の通り。

// myAppモジュールを作成
var app = angular.module('myApp', []);

// myAppモジュールにParentCtrlコントローラーを登録
app.controller('ParentCtrl', function($scope) {
  $scope.parentString = '親のプロパティサンプル';
  console.log('親 : ');
  console.log($scope);
});

// myAppモジュールにChildCtrlコントローラーを登録
app.controller('ChildCtrl', function($scope) {
  $scope.childString = '子のプロパティサンプル';
  console.log('子 : ');
  console.log($scope);
  console.log($scope.$parent.parentString);
});

index.htmlの記述内容

例として以下の通り。

<div ng-controller="ParentCtrl">
  親コントローラー
  <div ng-controller="ChildCtrl">
    子コントローラー
  </div>
</div>

上記のように、単純にHTML文書構造で入れ子にすれば親子になるみたい。

子コントローラーから親の$scope.parentStringにアクセスする

以下のようにする事でアクセスできた。

console.log($scope.$parent.parentString);

親コントローラーから子の$scope.childStringにアクセスする

まだよくわからないけど、単純にアクセスする方法は無いのかも。

[AngularJS] 複数Contoller間で、Service,$rootScope,$emitを利用して変数を共有した時のメモ - Qiita

AngularJSで「サービス」を構築するときの service と factory - kitak.blog

今回はここまで。