ネストされたビューとコントローラーを共有することを目的とした抽象親ビューがあります。
.state('edit', {
abstract: true,
url: '/home/edit/:id',
templateUrl: 'app/templates/editView.html',
controller: 'editController'
})
.state('edit.details', {
url: '/details',
templateUrl: 'app/templates/editDetailsView.html'
})
.state('edit.info', {
url: '/info',
templateUrl: 'app/templates/editInfoView.html'
})
ルーティングは期待どおりに機能します。
問題は、$scopeネストされたビューの 1 つから変数を更新しても、その変更がビューに反映されないことです。親ビューから同じ操作を行うと、正常に動作します。これは、 を必要とする状況ではありません$apply。
私の推測では、各ビューに対して の新しいインスタンスがeditController作成されていますが、その理由や修正方法がわかりません。
ベストアンサー1
ここでの問題は、次の Q & A に関連しています。AngularJS ui-router の状態間で $scope データを共有するにはどうすればよいですか?。
解決方法は次の場所に隠されています:
スコープを理解する
AngularJS では、子スコープは通常、親スコープからプロトタイプ的に継承されます
。...モデルに「.」を含めると、プロトタイプ継承が有効になります。
// So, use
<input type="text" ng-model="someObj.prop1">
// rather than
<input type="text" ng-model="prop1">.
そしてこれも
ビュー階層のみによるスコープ継承
スコープ プロパティは、状態のビューがネストされている場合にのみ、状態チェーンを継承することに注意してください。スコープ プロパティの継承は、状態のネストとは関係なく、ビュー (テンプレート) のネストとのみ関係があります。
サイト内のさまざまなネストされていない場所で UI ビューにテンプレートを設定するネストされた状態が存在する可能性は十分にあります。このシナリオでは、子状態のビュー内で親状態ビューのスコープ変数にアクセスすることはできません。
これを編集コントローラーで実行する必要があります
controller('editController', function ($scope) {
$scope.Model = $scope.Model || {SomeProperty : "xxx"};
})
そしてそれを再利用することもできるcontroller: 'editController' (継承のおかげで $scope.Model が存在するため、そうする必要はありません)
.state('edit', {
abstract: true,
url: '/home/edit/:id',
templateUrl: 'app/templates/editView.html',
controller: 'editController'
})
.state('edit.details', {
url: '/details',
templateUrl: 'app/templates/editDetailsView.html',
controller: 'editController'
})
.state('edit.info', {
url: '/info',
templateUrl: 'app/templates/editInfoView.html',
controller: 'editController'
})
これで、同じコントローラが何度もインスタンス化されます（すべての子の親）が、$scope.Model初期化されるのは1回だけ（親の内部）で、どこからでも利用できるようになります。
これをチェックして同様の動作例はこちら