通过工厂隐藏对话框

Question

我正在使用 angular material。

我创建了一个工厂来显示加载模式。

我可以显示它，但我不能关闭它。

你能告诉我为什么，或者告诉我怎么做吗？

这是我的工厂：

(function() {
'use strict';

angular
    .module('loveProjectApp')
    .factory('ProgressFactory', ProgressFactory);

ProgressFactory.$inject = ['$mdDialog'];

/* @ngInject */
function ProgressFactory($mdDialog) {
    var service = {
        show: show,
        cancel: cancel
    };
    return service;

    ////////////////

    function show() {
        $mdDialog.show({
            templateUrl: 'miscellaneous/progress/progress.dialog.html',
            parent: angular.element(document.body),
            clickOutsideToClose: false,
            fullscreen: false
        });
    }

    function cancel() {
        $mdDialog.hide();
    }
}
})();

我这样称呼它：

        function logout() {
        ProgressFactory.show();
        authFactory.logout().then(function() {
            ToastFactory.successToast('SUCCESSES.DISCONNECTED');
            $state.reload();
            ProgressFactory.cancel();
        });

所以显示了加载器，但没有关闭。

Answer 1

我已经为您的代码创建了一个 CodePen example，对话框确实关闭了。我已经使用 $timeout 来复制你的 authFactory.logout() 调用。

这让我觉得

.then回调函数没有被调用，或者
在调用 ProgressFactory.cancel(); 之前发生了一些事情，阻止它被执行

JS

.controller('AppCtrl', function($scope, $timeout, ProgressFactory) {
  $scope.logout = function () {
      ProgressFactory.show();
      $timeout(function () {
        ProgressFactory.cancel();
      }, 2000);
    }
})

Answer 2

找到了！

我的服务器运行在我的应用程序使用的同一台机器上。

我显然调用 $mdDialog.cancel(); 太快了，所以我在工厂中添加了 1 秒的超时，现在对话框正确关闭了。

现在效果很好，谢谢！

通过工厂隐藏对话框

Hide a dialog through a factory

angularjs

angular-material

angularjs-factory