web-dev-qa-db-ja.com

角度UIモーダル解決

私はAngularjsを初めて使用するすべての人に、Angularでモーダルを作成しています。私がオンラインで見つけた例の1つは、私が理解するのが難しい次のことです

$scope.checkout = function (cartObj) {
  var modalInstance = $modal.open({
  templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',
  controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
  }],
  resolve : { // This fires up before controller loads and templates rendered
    cartObj : function() {
       return cartObj;
    }
  }
});

私が混乱しているのは、関数のパラメーターが依存関係の注入を通じてコン​​トローラーに渡されるときに既に受け取ったcartObjです。ただし、なぜcartObjという名前の関数を作成し、その変数を返す必要があります。紛らわしいようです。誰でも助けてくれますか？

javascriptangularjsangular-uiangular-ui-bootstrap
16
Muhammad Raihan Muhaimin

行ごとの内訳は次のとおりです。

_$scope.checkout = function (cartObj) {
_

関数を参照するcheckoutという名前の$ scope変数が作成されているため、ビューでcheckout()として呼び出すことができます（たとえば、ng-click = "checkout"のボタンから）。

この関数には、cartObjと呼ばれるserviceが渡されます。

_var modalInstance = $modal.open({
_

ModalInstanceという変数を使用して、$ modalサービスのopenメソッドを呼び出します。

UI Bootstrap $ modalサービスは、モーダルインスタンスを返します。openメソッドには、モーダルインスタンス構成を定義するオブジェクトが次のように渡されます。

_templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',
_

これは、モーダルインスタンスがそれぞれのURLにあるテンプレートを使用する必要があることを示しています。

_controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
  }],
_

これにより、$ scope、$ modalInstanceサービス、そして重要なことに、解決されたcartObjサービスに渡されるモーダルインスタンスのコントローラーが作成されます。

サービスは、コントローラー間でデータを共有するために使用されるシングルトンです。つまり、cartObjサービスには1つのバージョンがあり、1つのコントローラーがそれを更新すると、別のコントローラーがサービスを照会し、他のコントローラーによって更新されたデータを取得できます。それは素晴らしいことですが、コントローラーの読み込み時にサービスからの値で変数を初期化する必要がある場合、最初にデータを取得してからデータを取得するまで待機するため、未定義を返します。それが解決の出番です：

_  resolve : { // This fires up before controller loads and templates rendered
    cartObj : function() {
       return cartObj;
    }
  }
});
_

ここで解決を使用する理由は、おそらくテンプレート自体が、テンプレートがロードされるときに利用可能なcartObjからのデータに依存しているためです。 Resolveは、コントローラーがロードされる前に約束を解決するため、コントローラーがロードされると、データがそこにあり準備ができています。基本的に、resolveは、コントローラー内のモデルの初期化を簡素化します。これは、コントローラーがデータを取得してフェッチする代わりに、初期データがコントローラーに与えられるためです。

解決されたcartObjはmodalInstanceに渡されるものであるため、コントローラーでcartObj。somepropertyとしてアクセスできます。

29
jme11