AngularJS 模式单例在服务中未更新视图

AngularJS Modal Singleton in Service Not Updating View

本文关键字：更新 新视图 服务 模式 单例 AngularJS      更新时间：2023-09-26

>我正在尝试创建一个单例"加载对话框"服务，但是在关闭现有对话框时，视图中没有更新。

模态对话服务：

angular.module('app')
  .service('modalDialog', function ($modal) {
    this.create = function (templateUrl, data, size) {
      return $modal.open({
        templateUrl: templateUrl,
        controller: 'ModalDialogCtrl',
        size: size,
        backdrop: 'static',
        keyboard: false,
        resolve: {
          data: function () {
            return data;
          }
        }
      });
    };
    this.destroy = function (modalInstance) {
      modalInstance.close();
    };
  });

加载对话框服务：

angular.module('app')
  .service('loadingDialog', function (modalDialog) {
    this.instance = null;
    this.show = function (text) {
      if (this.instance !== null) {
        this.hide();
      }
      this.instance = modalDialog.create('views/loading-dialog.html', {text: text});
    };
    this.hide = function () {
      modalDialog.destroy(this.instance);
    };
  });

您可以看到我正在存储实例变量以确保一次只显示 1 个加载对话框。这不会发生。

例如，在控制器中，执行以下代码：

loadingDialog.show('dialog 1');
loadingDialog.show('dialog 2');
loadingDialog.hide();

现在我期望的是创建第一个对话框，然后替换为第二个对话框。调用隐藏方法时，不会打开任何加载对话框。

现在实际发生的情况是，这两个对话框是相互叠加创建的，当调用隐藏方法时，对话框 2 关闭，但对话框 1 仍然打开。

仅当从控制器显式调用 loadingDialog 服务的 hide 方法时，它才似乎实际上对视图进行了更改。如果从服务调用，则不会发生任何操作。

在我看来，在服务本身中调用 hide 方法不会更新视图，但我不知道如何解决这个问题。

看起来你正在做的事情很好。问题在于通过引导打开对话框时发生的延迟。我使用超时顺序进行动画，然后在动画制作后添加要跟踪的对话框。在您的情况下，您尝试过早关闭它，并且在modalstack关闭方法中，它会查找打开的窗口，但它还没有。它在工厂$$stackedmap内部保留一堆打开的窗口，并且尚未将窗口添加到堆栈中。

从关闭方法 

 $modalStack.close = function (modalInstance, result) {
    var modalWindow = openedWindows.get(modalInstance); 
    if (modalWindow) {
      modalWindow.value.deferred.resolve(result);
      removeModalWindow(modalInstance);
    }
  };

为了解决这个问题，您可以使用超时（接近0.15s的动画间隔）来包装modalinstance.close。

this.destroy = function (modalInstance) {
 $timeout(function(){
    modalInstance.close();
  },150);
};

演示

相关文章：