入れ子による継承やui-routerなどで親子関係になっているコントローラーに関していえば、子から親の変数を参照することは簡単にできる。が、親から子のプロパティを参照するのに手こずった。
解決方法としては双方のコントローラーに共通のサービスを注入しそのサービスが返却するオブジェクトを経由して値の共有を行うのがベターとのこと。下記例。
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 |
myApp.factory('Data', function () { return { FirstName: '' }; }); myApp.controller('FirstCtrl', function ($scope, Data) { $scope.Data = Data; }); myApp.controller('SecondCtrl', function ($scope, Data) { $scope.Data = Data; }); |
HTML
|
1 2 3 4 5 6 7 8 |
<div ng-controller="FirstCtrl"> <input type="text" ng-model="Data.FirstName"> <br>Input is : <strong>{{Data.FirstName}}</strong> </div> <hr> <div ng-controller="SecondCtrl"> Input should also be here: {{Data.FirstName}} </div> |
これで片方のモデルを書き換えるともう片方のモデルにも変更が伝搬されるようになった。