AngularJS 服务中的模态单例未更新视图
AngularJS Modal Singleton in Service Not Updating View
我正在尝试创建单例 'LoadingDialog' 服务,但是当关闭现有对话框时,视图中没有更新。
ModalDialog 服务:
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 个加载对话框。这不会发生。
比如在Controller中,执行如下代码:
loadingDialog.show('dialog 1');
loadingDialog.show('dialog 2');
loadingDialog.hide();
现在我所期望的是创建第一个对话框,然后由第二个对话框替换。调用 hide 方法时,没有打开加载对话框。
现在实际发生的是,这 2 个对话框是在彼此之上创建的,当调用 hide 方法时,对话框 2 关闭但对话框 1 仍然打开。
仅当从控制器显式调用 loadingDialog
服务的 hide
方法时,它似乎才真正对视图进行了更改。如果从服务调用,什么也不会发生。
在我看来,在服务本身中调用 hide
方法并没有更新视图,但我不知道如何解决这个问题。
看来你做的还不错。问题是 bootstrap 打开对话框时发生的延迟。我使用超时来让动画发生,然后在动画后添加要跟踪的对话框。在您的情况下,您试图过早关闭它,并且在 modalstack 关闭方法中它寻找打开的 windows 但它还不存在。它在工厂 $$stackedmap
中内部保留了一堆打开的 windows 并且它还没有在堆栈中添加 window。
来自 close method
$modalStack.close = function (modalInstance, result) {
var modalWindow = openedWindows.get(modalInstance);
if (modalWindow) {
modalWindow.value.deferred.resolve(result);
removeModalWindow(modalInstance);
}
};
为了解决这个问题,您可以使用超时(间隔接近 0.15 秒的动画间隔)来包装 modalinstance.close。
this.destroy = function (modalInstance) {
$timeout(function(){
modalInstance.close();
},150);
};
我正在尝试创建单例 'LoadingDialog' 服务,但是当关闭现有对话框时,视图中没有更新。
ModalDialog 服务:
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 个加载对话框。这不会发生。
比如在Controller中,执行如下代码:
loadingDialog.show('dialog 1');
loadingDialog.show('dialog 2');
loadingDialog.hide();
现在我所期望的是创建第一个对话框,然后由第二个对话框替换。调用 hide 方法时,没有打开加载对话框。
现在实际发生的是,这 2 个对话框是在彼此之上创建的,当调用 hide 方法时,对话框 2 关闭但对话框 1 仍然打开。
仅当从控制器显式调用 loadingDialog
服务的 hide
方法时,它似乎才真正对视图进行了更改。如果从服务调用,什么也不会发生。
在我看来,在服务本身中调用 hide
方法并没有更新视图,但我不知道如何解决这个问题。
看来你做的还不错。问题是 bootstrap 打开对话框时发生的延迟。我使用超时来让动画发生,然后在动画后添加要跟踪的对话框。在您的情况下,您试图过早关闭它,并且在 modalstack 关闭方法中它寻找打开的 windows 但它还不存在。它在工厂 $$stackedmap
中内部保留了一堆打开的 windows 并且它还没有在堆栈中添加 window。
来自 close method
$modalStack.close = function (modalInstance, result) {
var modalWindow = openedWindows.get(modalInstance);
if (modalWindow) {
modalWindow.value.deferred.resolve(result);
removeModalWindow(modalInstance);
}
};
为了解决这个问题,您可以使用超时(间隔接近 0.15 秒的动画间隔)来包装 modalinstance.close。
this.destroy = function (modalInstance) {
$timeout(function(){
modalInstance.close();
},150);
};