$ http請求中的角度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>

來源

2016-04-26 rodney757

請在問題的模塊模板 –

您還沒有包括在調用'$ uibModalInstance.close（）的部分內容'（或'$ uibModalInstance.dismiss（）'），但在請求解決後您需要調用其中一個函數。 –

對，我沒有這樣做，因爲我沒有能夠打開模式。我無法打開對話框。我嘗試在指令模板中使用ng-init。「template：'

Test Loading

'，」另外，當我嘗試手動打開模式時，出現錯誤：https://docs.angularjs.org/error/$compile/nonassign?p0=undefined&p1=loadingInstance&p2=loadingModal – rodney757

好的，所以我可以通過使用工廠來做到這一點。然後在控制器中，我在啓動$ 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, 

     }); 
    } 

}]);

來源

2016-04-27 14:29:18 rodney757

在你fetchPage()功能：

打開模式和它的對象返回到一個變量
運行$ HTTP調用，並在分辨率，關閉模式，其存儲變量引用

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

我可能會在問題之外，但您不要有在廣告中這樣做irective。您仍然可以通過使用模板的模板和其他模塊定義的控制器來模塊化。

如果您需要在指令中執行此操作，則可以將http get函數傳遞到帶有'&'範圍屬性的指令中。

來源

2016-04-26 22:57:26

如果我沒有使用指令，那麼我需要在每個我想使用的控制器中鍵入模態配置。傳遞http get函數是唯一的方法來使這個指令？ – rodney757

$ http請求中的角度UI引導模態顯示

回答

相關問題