サービスやウォッチャーを使用せずに AngularJS UI ルーター状態間でデータを共有する方法は?

サービスやウォッチャーを使用せずに AngularJS UI-Router 状態間で $scope データを共有する

UI-Router では、親のサービスやウォッチャーに依存せずに、メイン コントローラーとその子状態を制御します。 controller.

解決策:

重要なのは、AngularJS スコープと UI-Router ビューの関係を理解することです:

• ビュー階層のみによるスコープの継承: スコープは、状態ビューが次の場合にのみ状態チェーンに継承されます。
• スコープについて: 通常、子スコープは親スコープからプロトタイプを継承します。 「.」を使用する表記法 (Model.PropertyName など) により、この継承が保証されます。

技術実装:

1. ネストされたビューの定義: 子状態ビューがネストされていることを確認します。親の中でview.
2. 参照型の値を使用します: $scope モデルでは、プリミティブ値ではなく、参照によって渡されるオブジェクトまたは参照を使用します。
3. 使用ドット表記: ng-model 定義では、プロトタイプの継承を確実にするためにドット表記を使用します (例: PropertyName の代わりに Model.PropertyName).

例:

次の UI-Router 状態定義を考えてみましょう:

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

mainController 内で、共有次のようなデータ モデル:

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

子状態テンプレートで、次を使用します。共有データにアクセスするためのドット表記の ng-model:

<input type="text" ng-model="Model.Name">

これらの手順に従うことで、親コントローラーのサービスやウォッチャーを必要とせずに、UI-Router 状態の $scope 間でデータを効果的に共有できます。

以上がサービスやウォッチャーを使用せずに AngularJS UI ルーター状態間でデータを共有する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。