我正在尝试创建一个单身' LoadingDialog' service,但在关闭现有对话框时,视图中没有更新。
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();
};
});
LoadingDialog服务:
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方法时,dialog2被关闭但对话框1仍然打开。
仅当从控制器显式调用loadingDialog
服务的hide
方法时,它才会真正对视图进行更改。如果从服务中调用,则不会发生任何事情。
在我看来,在服务中调用hide
方法本身并不是更新视图,但我不知道如何解决这个问题。
答案 0 :(得分:1)
看起来你正在做的事情很好。问题在于通过引导程序打开对话框时发生的延迟。我使用超时以便动画发生,然后在动画后添加对话框进行跟踪。在你的情况下,你试图太早关闭它,并在modalstack关闭方法,它寻找打开的窗口,它还没有。它在工厂$$stackedmap
内部保留了一堆打开的窗口,但它还没有在堆栈中添加窗口。
为了解决方法,你可以使用一个超时(在动画间隔接近0.15秒的时间间隔)包装modalinstance.close。 <强> Demo 强> $modalStack.close = function (modalInstance, result) {
var modalWindow = openedWindows.get(modalInstance);
if (modalWindow) {
modalWindow.value.deferred.resolve(result);
removeModalWindow(modalInstance);
}
};
this.destroy = function (modalInstance) {
$timeout(function(){
modalInstance.close();
},150);
};