Javascript $http请求期间的角度UI引导模式显示

我试图创建一个使用angular 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>

//一些html

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'，['$uibModal'， 功能（$modal）{ 返回{ 是的， 限制：“EA”， 模板：“测试加载”， 范围：{ 加载状态：“=”， 打开：“=” }, 链接：函数（范围、元素、属性）{ scope.open=函数（）{ scope.loadingInstance=$modal.open({ templateUrl:'app/templates/loadingModal.tpl.html'， 控制器：scope.useCtrl， 尺寸：'sm'， windowClass:“应用程序模式窗口”， 背景：没错， }); scope.loadingInstance.result.then（function（））{ scope.initialized=true； console.log（'Finished'）； }，函数（）{ scope.initialized=true； log（'Modal disposed at:'+new Date（））； }); }; } }; }]); loadingModal.tpl.html：

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

加载。。。。

在

fetchPage（）函数中：

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

var modal=$uibModal.open({
//你的模态配置
});
$http.get（…）.then（函数（响应）{
modal.close（）；
});

我可能超出了问题的范围，但你不必在指令中这样做。您仍然可以通过使用其他地方定义的模态模板和模态控制器将其模块化

如果需要在指令中执行此操作，可以将http get函数传递到具有“&”scope属性的指令中
 好的，所以我可以通过使用工厂来实现这一点。然后在控制器中，我在启动$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,

        });
    }

}]);

请在问题中包括模块模板的内容您尚未包括调用
$uibModalInstance.close（）
（或
$uibModalInstance.disease（）
）的部分，但您需要在解决请求后调用其中一个函数。对，我没有这样做，因为我无法打开modal。我无法打开对话框。我尝试在指令模板中使用ng init。“模板：'测试加载'，”另外，当我试图手动打开模式时，我得到了一个错误：我认为
nginit
把这搞砸了。尝试删除
ng init
并移动所有
作用域。在外部打开
函数。@MuliYulzary:如果删除ng init，模态将在页面加载时打开，但是我仍然会遇到一个错误，即无法将模态实例分配给未定义的变量，因此我无法从控制器关闭它如果我没有使用指令，然后我需要在我想要使用的每个控制器中输入模态配置。传递http get函数是使其成为指令的唯一方法吗？