Question

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

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

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

Answer 1

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

EG。创建服务

.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，请通过输入说明，服务状态将会更新。然后，当你创建并销毁你的模态时，状态将会持续存在。

Answer 2

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

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

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

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

2 个答案: