不要在关闭时破坏Angular Bootstrap模态

Don't destroy an Angular Bootstrap modal on close

本文关键字：Angular Bootstrap 模态      更新时间：2023-09-26

我正在使用Angular Bootstrap来显示一个模态(这里展示的那个)，它工作得很好。然而，这个Angular扩展的默认行为是，当模态被关闭，然后再打开时，模态就会被重建(并创建一个新的控制器实例)。

因为我有一些非常先进的东西在模态内部，我希望模态只是隐藏当它关闭，使其状态保持。我搜索了一下，但不幸的是，我找不到一个简单有效的答案。

只是隐藏它将是一个选项，但这必须发生在模态关闭时，所以当它关闭时，因为背景被点击。我想要的动画效果和模态以正常方式打开时一样

为什么不将模态状态抽象到它自己的服务中呢?这样，无论何时创建模态控制器，它都会在初始化时使用该服务来设置视图状态。

。创建服务

.factory('ModalStateService', function(){
    var state = {
        someValue: 'something'
    };
    return {
        getState: function() { return state; }
    };
});

然后在控制器中:

.controller('ModalCtrl', function($scope, ModalStateService){
    $scope.viewState = ModalStateService.getState();
});

然后在你的模态内容视图中，例如:

<span>{{viewState.someValue}}</span>

如果你要在你的模态中设置someValue，比如通过一个输入，服务状态将被更新。然后，当你创建和销毁你的模态时，状态将保持不变。

你可能已经知道，当关联的视图被添加到DOM中时，Angular会初始化一个控制器。因此，插件作者可能已经决定添加和删除view元素，这样他就不必担心每次用户打开和关闭模态时清除'scope'。

例如，我们在模态中有一个登录框，如果没有清除作用域，即使我们下次显示它，它也会保留已填写的详细信息。

解决这个问题的一个简单方法是将原始模态封装在一个自定义指令中，并重新生成它。然后改变自定义模态的display属性来显示和隐藏模态;)

相关文章：