AngularJSのサービスとしてのモーダルからの応答を処理する方法

Question

JavaScriptとAngularJSの新機能です。私と驚くJSとのカップルのことがあります。たとえば、私はモーダルサービスを作成しようとしていますが、私は以下の例をオンラインで見つけました。私は、モーダルが開かれている特定のラインで何が起こっているのかを理解したいと思います。ライン入力

 $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) { 
         $scope.submit = function() { 
          console.log("Submit"); 
          //DB CALL HERE (with promise) 
          return "well"; 

         }; 
         $scope.cancel = function() { 
          console.log("Cancel"); 
          $modalInstance.dismiss('cancel'); 
          return "not so well"; 
         }; 
     }], 
     resolve : { // This fires up before controller loads and templates rendered 
     cartObj : function() { 
      return cartObj; 
     } 
     } 
    }); 

：私が理解

var modalInstance = $modal.open({ 

はopenメソッドが設定された構成の束と$モーダルサービスに呼ばれています。

コントローラー内にはありません。私は、特定のCRUD操作を行うために使用する消費ビューから送信されたcartObjを持っています。

私の質問は： 私は消費しているビューには、成功または失敗したかどうかを知り、データを返すことができます。どのように私は消費ビューでコールバックでこれを実装できますか？これは、「送信」ロジックがModalsのコントローラ内にあるため、混乱しています。 1.ここから何かを返すと、消費側でアクセスできなくなります。サブミットコールの中からどのように戻ってくるのですか？ 2.この設定に基づいて成功とエラーを処理するにはどうすればよいですか？モーダルサービスで成功と失敗を処理し、データだけを返しますか？それとも、私は同じように、優雅に終わりを消費でそれを行うことができる方法があります：

modalService.checkout(cartObj).success(function(response){ 
     //success handler 
    }).error(function(response)){ 
     //failure handler 
    } 

Answer 1

私はこの問題にアプローチするために古い学校の方法を考え出しました。私は約束を全く使う必要はなかった。消費者側からは、私はちょうどかかり終わりそうのようなのparamsに2つの関数を返す：モーダルサービスにおける

service.method(param, function(result){ 
     //success handler 
    }, function(err){ 
     //error handler 
    }); 

、署名は次のように変化します

service.method(params, succesFunc, errorFunc){ 
    //modal code 
    } 

を今、私はちょうどsuccessFuncを呼び出したりしますerrorFuncは、DB呼び出しが成功したかどうかに基づいて、関数のパラメータでデータまたはエラーメッセージをそれぞれ渡す必要があるときにコールバックします。 Like：

$scope.submit = function() { 
    console.log("Submit"); 
    //DB CALL HERE (with promise) 
    DB_CALL.then(function(success) { 
     // It resolve and pass to success fuction of the result promise 
     successFunc(success); 
    }, function(err) { 
     // It rejects the result promise 
     errorFunc(err); 
    }); 
    return "well"; 

    }; 

これは、この種のユースケースで役に立ちます。

Answer 2

、あなたはので、私はちょうどあなたの問題を解決する方法があるあなたのコードを、完了しますAngularUI を使用しているあなたのコードを1として

$scope.checkout = function(cartObj) { 
    var modalInstance = $modal.open({ 
    templateUrl: 'assets/menu/directives/payment-processing-modal.tmpl.html', 
    controller: ["$scope", "$uibModalInstance", "cartObj", function($scope, $uibModalInstance, cartObj) { 
     $scope.submit = function() { 
     console.log("Submit"); 
     //DB CALL HERE (with promise) 
     DB_CALL.then(function(success) { 
      // It resolve and pass to success fuction of the result promise 
      $uibModalInstance.close({ success: success }); 
     }, function(err) { 
      // It rejects the result promise 
      $uibModalInstance.dismiss({ error: err }); 
     }); 
     return "well"; 

     }; 
     $scope.cancel = function() { 
     console.log("Cancel"); 
     // It rejects the result promise 
     $uibModalInstance.dismiss({ error: 'cancel' }); 
     return "not so well"; 
     }; 
    }], 
    resolve: { // This fires up before controller loads and templates rendered 
     cartObj: function() { 
     return cartObj; 
     } 
    } 
    }).result; 
} 

まず、modalInstanceの代わりに$ uibModalInstanceを使用します。私は最終的に約束を返す$ modal.open（）が提供する「結果」の方法でmodalInstanceにバインドされて行われている今、何this

を読む、 はだから今、あなたはこの

modalIntance.then(function(success) { 
     /* Your success code goes here*/ 
    }, function(err) { 
     /* Your failure code goes here*/ 
    }); 

のような約束を解決することができます

希望します。