Angular UI Bootstrap $http 请求期间的模态显示

Question

我正在尝试创建一个使用 angular ui bootstrap 模式的指令。我想在发出 $http 请求时从我的控制器打开此指令，并在请求解析时关闭它。我是 angular 的新手，有点卡住了。这是我到目前为止所得到的。

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>

Answer 1

在您的 fetchPage() 函数中：

打开模式并将return其对象设置为变量
运行 $http 调用并在解析中，使用其存储的变量引用关闭模态

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

我可能会超出问题范围，但您没有在指令中执行此操作。您仍然可以通过使用模态模板和别处定义的模态控制器来对其进行模块化。

如果您需要在指令中执行此操作，您可以将 http get 函数传递到具有“&”范围的指令中属性。

Answer 2

好的，所以我能够通过使用工厂来做到这一点。然后在控制器中，我在发起 $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,

        });
    }

}]);

Angular UI Bootstrap $http 请求期间的模态显示

Angular UI Bootstrap modal display during $http request

javascript

angularjs

angular-ui

angularjs-directive

angular-ui-bootstrap