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

AngularJS UI-Router でステート間で $scope データを渡す

AngularJS UI-Router では、子ステート間を移動しても、親から $scope データが自動的に継承されません。コントローラ。これは、状態間でデータを共有する必要がある場合に問題を引き起こす可能性があります。

ネストされたビューの継承

状態間で $scope データを共有する鍵は、UI-Router のビュー階層によって提供される継承メカニズムを採用することにあります。子ビューが親ビュー内にネストされている場合、子スコープは親スコープからプロパティを継承します。

AngularJS スコープの継承について

AngularJS スコープはプロトタイプを継承します。つまり、子スコープは親スコープからプロパティとメソッドを継承します。親スコープ。 「.」を使用するng-model ディレクティブのプロパティ名に を指定すると、プロパティが確実に継承されます。

実装

状態間で $scope データを共有するには、次の手順に従います。

1. 定義$scope.Model などの $scope 内の参照型 (オブジェクトなど)。
2. 親状態で、Model オブジェクトを初期化します (例: $scope.Model = $scope.Model || {名前: "xxx"}).
3. 子状態では、ng-model="Model.PropertyName" を使用して Model オブジェクトにアクセスします (例: ).

例

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

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

これらの手順に従うことで、UI-Router の状態間で $scope データをシームレスに共有し、複数の状態間で一貫したデータ アクセスを確保できます。あなたのアプリケーション。

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