$ 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引导模态显示

回答

相关问题