サービスなしで AngularJS UI-Router の状態間で $scope データを共有する方法は?

AngularJS UI-Router の状態間で $scope データを共有する

状態管理に UI-Router を利用する AngularJS アプリケーションでは、親ステートと子ステートの間で $scope データを共有する必要があります。サービスや複雑なウォッチャーを使用せずに、どうすればこれを実現できますか?

ビュー階層継承の利用

AngularJS UI-Router は、子ビューの場合にのみスコープ プロパティの継承を提供します。親ビュー内にネストされています。これは、子状態のテンプレートが親ビューのテンプレート内にネストされている必要があることを意味します。

たとえば、次の状態定義を考えてみましょう。

.state("main", {
 controller:'mainController',
 url:"/main",
 templateUrl: "main_init.html"
})  
.state("main.1", {
 controller:'mainController',
 parent: 'main',
 url:"/1",
 templateUrl: 'form_1.html'
})  
.state("main.2", {
 controller:'mainController',
 parent: 'main',
 url: "/2",
 templateUrl: 'form_2.html'
})  

このシナリオでは、子ステート (「form_1.html」および「form_2.html」) は、親ステート (「main_init.html」) のビュー内にネストされます。これにより、親状態から子状態への $scope プロパティの継承が可能になります。

参照型とドット表記の使用

データが確実に共有されるようにするには、次のようにします。ドット表記を使用して親コントローラーの $scope で参照型を定義することが重要です。例:

controller('mainController', function ($scope) {
  $scope.Model = $scope.Model || {Name : "xxx"};
})

ドット表記を採用することで、$scope.Model が参照型であることが保証されます。子状態でアクセスすると、親状態で作成された $scope.Model の同じインスタンスとなり、データ共有が容易になります。

例

例では質問に記載されているように、メイン コントローラーと子の状態はスコープの継承に対して正しく設定されています。問題は、ドット表記の不適切な使用にあります。 $scope.Model.Name を参照するように子状態の ng-model を変更すると、データ共有が確立されます。

以上がサービスなしで AngularJS UI-Router の状態間で $scope データを共有する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。