角度解決サービスから約束

Question

私は、ブートストラップモーダルを示す関数を含むサービスを持っています。モーダル結果は、閉じるときにサービス内で受け取られ、その後、関数の呼び出し側に約束が解決されます。サービス関数自体は、約束を返します。

私の問題は、モーダルが閉じた後、コントローラが解決された約束を受け取ることがないということです。モーダルは、私の約束を解決し、ヒットし、commentCountが正しい値になる約束をもたらします。

私は約束事に新しいので、これは正しい方法ではないかもしれませんが、今のようには動作しませんか？

編集：私は、関数の呼び出し元にcommentCountを返す前に、サービスの内部で何かを行う必要があるので、私はちょうど、instance.resultから約束を返さないよ

。しかし、これはまだ実装されていません。

サービス：私はこのヘルプあなたが、それは間違いなく、ブラウザの代わりに、ブートストラップモーダルを持って望んでいる誰かを助けるだろうかわからない

service.showModal(postId, category) 
.then(function (commentCount) { 
    var comments = commentCount; 
}); 

Answer 1

：コントローラから

function postModal($http, $rootScope, $uibModal, userService, utilService, enumService, $q) { 
     var service = {};  

     service.showModal = function (postId, category) { 
      var deferred = $q.defer(); 

      var extraClass = (category == enumService.postType.ARTICLE) ? 'article-post' : ''; 
      var instance = $uibModal.open({ 
       templateUrl: 'app/views/post_modal.html', 
       controller: 'postController', 
       controllerAs: 'postController', 
       windowClass: 'center-modal post-modal', 
       backdropClass: 'post-backdrop ' + extraClass, 
       background: 'static', 
       resolve: { 
        postId: function() { 
         return postId; 
        }, 
        category: function() { 
         return category; 
        }, 
        modalInstance: function() { 
         return this; 
        } 
       } 
      });  

      instance.result.then(function (commentCount) { 
       deferred.resolve(commentCount); 
      }); 

      return deferred.promise; 
     }; 

     return service; 
    } 

コードデフォルト。私はお互いに依存サービスとコントローラーを作りました：

.service('AlertService', function($uibModal){ 
    /* 
     headerText - presents text in header 
     bodyText - presents text in body 
     buttonText - presents text in button. On its click if method parameters is not passed, modal will be closed. 
        In situation that the method parameters is passed, on its click, method will be called. For situations 
        like that, there is parameter buttonText2 which will be used as cancel modal functionality. 
     method - presents passed function which will be called on confirmation 
     buttonText2 - presents text in button for cancel 

    */ 
    var alert = function(headerText, bodyText, buttonText, method, buttonText2){ 

     method = method || function(){}; 
     buttonText2 = buttonText2 || ''; 

     $uibModal.open({ 
      animation: true, 
      templateUrl: '/static/angular_templates/alert-modal.html', 
      controller: 'AlertModalInstanceCtrl', 
      size: 'md', 
      resolve: { 
       headerText: function() { 
        return headerText; 
       }, 
       bodyText: function() { 
        return bodyText; 
       }, 
       buttonText: function() { 
        return buttonText; 
       }, 
       method: function() { 
        return method; 
       }, 
       buttonText2: function() { 
        return buttonText2; 
       } 
      } 
     }); 
    }; 

    return{ 
     alert: alert 
    }; 

}) 
.controller('AlertModalInstanceCtrl', function ($scope, $uibModalInstance, headerText, bodyText, buttonText, method, buttonText2) { 
    $scope.headerText = headerText; 
    $scope.bodyText = bodyText; 
    $scope.buttonText = buttonText; 
    $scope.method = method; 
    $scope.buttonText2 = buttonText2; 

    $scope.ok = function() { 
     $scope.method(); 
     $uibModalInstance.dismiss('cancel'); 
    }; 

    $scope.cancel = function() { 
     $uibModalInstance.dismiss('cancel'); 
    }; 
}); 

とhtmlファイル：

今

<!--Modal used for alerts in AlertService--> 

<div class="modal-header"> 
    <h3 class="modal-title">{[{ headerText }]}</h3> 
</div> 
<div class="modal-body"> 
    <p>{[{ bodyText }]}</p> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-default" ng-click="cancel()" ng-if="buttonText2">{[{ buttonText2 }]}</button> 
    <button class="btn btn-primary" ng-click="ok()">{[{ buttonText }]}</button> 
</div> 

、あなたがそれを使用したいタイプに応じて、あなたはいくつかのオプションがあります： をあなたはheaderText、bodyText当該およびbuttonTextを渡す-if、それはあなたがheaderText、bodyText当該、buttonText及び方法を渡す-if、それは同じように動作します古典的な警告モーダル

AlertService.alert('Some header', 'Some message', 'Text button'); 

のように動作します古典的な警告モーダルですが、コントローラに渡して後で処理できる機能を備えています。

AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound); 

$scope.createRound = function(){ 
//do something 
} 

- 最後のものです。すべてのパラメータを渡すと、前のように動作し、モーダルをキャンセルして閉じることができます。

AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound, 'Cancel'); 

$scope.createRound = function(){ 
//do something 
} 

もちろん、これを使用するには、角度uiブートストラップを注入する必要があります。 私はこれを開発するために多くの時間を無駄にしましたが、それは価値があります。新しいコントローラ、新しいテンプレート、およびその他すべてのものを毎回作成するのは面倒でした。

コントローラからは、簡単に使用できます。まず注入してください。