$ httpリクエスト中の角度UIブートストラップモーダル表示

Question

角度uiブートストラップモーダルを使用する指令を作成しようとしています。 $ httpリクエストが行われたときに私のコントローラからこのディレクティブを開き、リクエストが解決したらそれを閉じたいと思います。私は角度があり、ちょっと立ち往生していない。これまでに私が得たことがここにあります。

expedition.htmlコントローラ：

.controller('ExpeditionCtrl', ['$http', 'UserFactory', '$scope', 
    function ($http, UserFactory, $scope) { 
     var vm = this; 
     vm.totalItems; 
     vm.itemsPerPage = 100; 
     vm.currentPage = 1; 
     vm.pageChanged = pageChanged; 
     vm.content = []; 
     vm.loadingInstance; 
     vm.open; 
     fetchPage(); 

     function pageChanged() { 
      fetchPage(); 
     } 

     function fetchPage() { 

      $http.get('myapi?page=' + vm.currentPage + "&limit=" + vm.itemsPerPage) 
       .then(function(response) { 
        angular.extend(vm.content, response.data.content); 
        vm.content = response.data.content; 
        vm.totalItems = response.data.totalElements; 
       }) 
     } 

    } 

expedition.html：

<div class="section"> 
    <div class="sectioncontent"> 
     // some html 

      <uib-pagination total-items="vm.totalItems" ng-model="vm.currentPage" ng-change="vm.pageChanged()" items-per-page="vm.itemsPerPage"></uib-pagination> 

     </div> 
     <loading-modal loadingInstance="vm.loadingInstance" open="vm.open"></loading-modal> 
    </div> 
</div> 

loadingModal.directive.js：

.directive('loadingModal', ['$uibModal', 
    function($modal) { 
     return { 
      transclude: true, 
      restrict: 'EA', 
      template: '<div ng-init="open()"> Test Loading </div>', 
      scope: { 
       loadingInstance: "=", 
       open: "=" 
      }, 
      link: function(scope, element, attrs) { 

       scope.open = function(){ 

        scope.loadingInstance = $modal.open({ 
         templateUrl: 'app/templates/loadingModal.tpl.html', 
         controller: scope.useCtrl, 
         size: 'sm', 
         windowClass: 'app-modal-window', 
         backdrop: true, 

        }); 
        scope.loadingInstance.result.then(function(){ 
         scope.initialized = true; 
         console.log('Finished'); 
        }, function(){ 
         scope.initialized = true; 
         console.log('Modal dismissed at : ' + new Date()); 
        }); 
       }; 
      } 
     }; 
    }]); 

loadingModal.tpl.html：

<div class="modal-body"> 
    Loading .... 
</div> 

あなたの fetchPage()機能で

Answer 1

私は工場でこれを行うことができました。コントローラでは、$ httpリクエストを開始するときにLoadingModalFactory.open（）を呼び出し、リクエストが解決したときにLoadingModalFactory.modalInstance.close（）を呼び出します。多分これを行う良い方法がありますが、今のところこれは機能しています。

.factory('LoadingModalFactory', ['$uibModal', function($uibModal) { 
    var modalInstance; 
    var loadingModalFactory = { 
     open: open, 
     modalInstance: modalInstance, 
    }; 

    return loadingModalFactory; 

    function open() { 
     loadingModalFactory.modalInstance = $uibModal.open({ 
      templateUrl: 'app/components/modals/templates/loadingModal.tpl.html', 
      size: 'sm', 
      windowClass: 'app-modal-window', 
      backdrop: true, 

     }); 
    } 

}]); 

Answer 2

：

1. オープンモーダルと変数
2. にそのオブジェクトを返すには、$のHTTP呼び出しを実行し、解像度に、その格納された変数を参照してモーダルを閉じ

var modal = $uibModal.open({ //your modal config }); $http.get(...).then(function(response) { modal.close(); });

私は外の質問の行くことができますが、は広告でこれを行うためにを持っていませんディレクティブ。これをモジュール化するには、モーダルのテンプレートと他の場所で定義されたモーダルのコントローラを使用します。

ディレクティブでこれを行う必要がある場合は、スコーププロパティ '&'を持つディレクティブにhttp get関数を渡すことができます。