在Bootstrap-ui模式下使用ui-router

在Bootstrap-ui模式下使用ui-router

将模态视为状态的视图组件很直观。用视图模板，控制器和一些解决方案来进行状态定义。这些功能中的每一个也适用于模态的定义。再往前走，将状态输入链接到打开模式，将状态出口链接到关闭模式，如果可以封装所有管道，则可以使用一种机制，就像带有状态

ui-sref

或

$state.go

用于输入的状态以及返回按钮一样。或更多特定于模式的退出触发器。

我已经对此进行了广泛的研究，我的方法是创建一个模态状态提供程序，该模版状态提供程序可类似于

$stateProvider

配置模块以定义绑定到模态的状态时使用。当时，我特别感兴趣的是通过状态和模态事件统一控制模态解雇，这比您要的要复杂得多，因此这里是一个简化的示例。

关键是使模态成为状态的责任，并使用模态提供的钩子使状态与模态通过作用域或其UI支持的独立交互保持同步。

.provider('modalState', function($stateProvider) {    var provider = this;    this.$get = function() {        return provider;    }    this.state = function(stateName, options) {        var modalInstance;        $stateProvider.state(stateName, { url: options.url, onEnter: function($modal, $state) {     modalInstance = $modal.open(options);     modalInstance.result['finally'](function() {         modalInstance = null;         if ($state.$current.name === stateName) {  $state.go('^');         }     }); }, onExit: function() {     if (modalInstance) {         modalInstance.close();     } }        });    };})

状态输入启动模式。状态出口将其关闭。模态可能会自行关闭（例如，通过背景幕单击），因此您必须观察并更新状态。

这种方法的好处是您的应用继续主要与状态和与状态相关的概念进行交互。如果您以后决定将模式转换为常规视图，反之亦然，则只需更改很少的代码。