Angular UI Bootstrap modale Anzeige während $ HTTP-Anfrage

Question

Ich versuche, eine Direktive zu erstellen, die eckig ui Bootstrap modal verwendet. Ich möchte diese Direktive von meinem Controller öffnen, wenn eine $ http-Anfrage gemacht wird, und sie schließen, wenn die Anfrage verrechnet wird. Ich bin neu zu kantig und ein bisschen fest. Hier ist, was ich bisher habe.

expedition.html Controller:

.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> 

Answer 1

Ok, also konnte ich dies mit einer Fabrik machen. Dann rufe ich in der Steuerung LoadingModalFactory.open() auf, wenn ich eine $ http-Anfrage einleite, und LoadingModalFactory.modalInstance.close(), wenn die Anfrage verrechnet wird. Vielleicht gibt es einen besseren Weg, dies zu tun, aber im Moment funktioniert das.

.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

In Ihrer fetchPage() Funktion:

1. Öffnen Sie die modal und zurück sein Objekt auf eine Variable
2. den Anruf $ http starten und in der Auflösung, in der Nähe des modalen mit seiner gespeicherten variablen Referenz

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

ich die Frage außerhalb gehen kann, aber Sie nicht dies in Anzeige zu tun haben Richtlinie. Sie können dies weiterhin modulieren, indem Sie eine Vorlage für das Modal und einen Controller für das Modal verwenden, das an anderer Stelle definiert ist.

Wenn Sie dies in einer Direktive tun müssen, könnten Sie die http get-Funktion in die Direktive mit der '&'-Bereichseigenschaft übergeben.