不要在关闭时销毁Angular Bootstrap模态

I am using Angular Bootstrap to display a Modal (the one presented here), which works perfectly. However, default behavior of this Angular extension is that the modal is reconstructed (and a new instance of its controller will be creatred) whenever it is closed and then opened again.

我正在使用Angular Bootstrap来显示一个Modal（这里展示的一个），它完美地运行。但是，此Angular扩展的默认行为是，只要关闭然后再次打开，就会重建模态（并且将创建其控制器的新实例）。

Since I have some pretty advanced stuff going on inside the Modal, I would like the modal to just be hidden when it is closed, so that its state remains. I have searched around a bit, but unfortunately could not find a simple and effective answer.

由于我在Modal中有一些非常先进的东西，我希望模态在关闭时隐藏，以便它的状态保持不变。我搜索了一下，但遗憾的是找不到简单有效的答案。

Just hiding it would be an option, but this then has to happen whenever the modal is closed, so also when it closes because the backdrop is clicked. And I want the same animation as when the modal is opened in the normal way.

只是隐藏它是一个选项，但是只要模态关闭就必须这样做，因此当它关闭因为点击了背景时也是如此。而且我想要以正常方式打开模态时的动画。

2 个解决方案

#1

Why don't you abstract the modal state into its own service? That way, whenever the modal controller is created, it uses the service to setup the view state on initialisation.

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

Eg. create a service

例如。创造一项服务

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

    return {
        getState: function() { return state; }
    };
});

Then in your controller:

然后在你的控制器中：

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

Then in your modal content view for example:

然后在您的模态内容视图中，例如：

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

If you were then to set someValue inside your modal, say through an input, the service state would be updated. Then when you create and destroy your modal, the state will persist.

如果您在模态中设置someValue，比如通过输入，则会更新服务状态。然后，当您创建并销毁模态时，状态将持续存在。

#2

As you might already know Angular initializes a controller when the associated view is added to the DOM. So the plugin author might have decided to add and remove the view element so that he does not have to worry about clearing the 'scope'each time user opens and closes the modal.

您可能已经知道，当关联视图添加到DOM时，Angular会初始化控制器。因此，插件作者可能决定添加和删除视图元素，这样他就不必担心在用户打开和关闭模式时每次清除“范围”。

For example, we have a login box in the modal and if the scope is not cleared, it will keep the filled in details even the next time we show it.

例如，我们在模态中有一个登录框，如果未清除范围，它将在下次显示时保留填写的详细信息。

An easy hack to solve your problem will be to wrap the originl modal in a custom directive, reneder it. And just change the display property of your custom modal to show and hide the modal ;)

解决问题的一个简单方法是将原始模态包装在自定义指令中，然后重新编写它。只需更改自定义模式的显示属性即可显示和隐藏模态;）

#1