将 ui-router 与 Bootstrap-ui 模式结合使用

我知道这已经被讨论过很多次了，大多数文章都引用了这段代码：AngularJS 中带有自定义 URL 的模态窗口 https://stackoverflow.com/a/21213422/1031184

但我就是不明白。我觉得这根本不是很清楚。我也发现了这个jsfiddle http://jsfiddle.net/sloot/ceWqw/3/这实际上很棒，非常有帮助，除了它不添加 url 并允许我使用后退按钮关闭模式。

编辑：这就是我需要帮助的地方。

因此，让我尝试解释一下我想要实现的目标。我有一个用于添加新项目的表单，并且有一个链接“添加新项目”。我希望当我单击“添加新项目”时，会弹出一个模式，其中包含我创建的“add-item.html”表单。这是一个新状态，因此 url 更改为 /add-item。 我可以填写表格，然后选择保存或关闭。关闭，关闭模式：p（多么奇怪）。但我也可以单击“返回”来关闭模式并返回到上一页（状态）。 此时我不需要关闭方面的帮助，因为我仍在努力使模式正常工作。

这是我的代码：

导航控制器：（这是否是放置模态函数的正确位置？）

angular.module('cbuiRouterApp')
  .controller('NavbarCtrl', function ($scope, $location, Auth, $modal) {
    $scope.menu = [{
      'title': 'Home',
      'link': '/'
    }];

    $scope.open = function(){

        // open modal whithout changing url
        $modal.open({
          templateUrl: 'components/new-item/new-item.html'
        });

        // I need to open popup via $state.go or something like this
        $scope.close = function(result){
          $modal.close(result);
        };
      };

    $scope.isCollapsed = true;
    $scope.isLoggedIn = Auth.isLoggedIn;
    $scope.isAdmin = Auth.isAdmin;
    $scope.getCurrentUser = Auth.getCurrentUser;

    $scope.logout = function() {
      Auth.logout();
      $location.path('/login');
    };

    $scope.isActive = function(route) {
      return route === $location.path();
    };
  });

这就是我激活模式的方式：

 <li ng-show='isLoggedIn()' ng-class='{active: isActive("/new-item")}'>
   <a href='javascript: void 0;' ng-click='open()'>New Item</a>
 </li>

新项目.html：

<div class="modal-header">
  <h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
  <ul>
    <li ng-repeat="item in items"><a ng-click="selected.item = item">{{ item }}</a></li>
  </ul>Selected:<b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
  <button ng-click="ok()" class="btn btn-primary">OK</button>
  <button ng-click="close()" class="btn btn-primary">OK</button>
</div>

另外，虽然这确实打开了一个模式，但它并没有关闭它，因为我无法解决这个问题。

将模态视为状态的视图组件是很直观的。使用视图模板、控制器和可能的一些解析来进行状态定义。这些功能中的每一个也适用于模态的定义。更进一步，将状态入口链接到打开模态，将状态出口链接到关闭模态，如果您可以封装所有管道，那么您就拥有了一种可以像状态一样使用的机制ui-sref or $state.go用于进入和后退按钮或更多特定于模式的退出触发器。

我研究过这个相当广泛地 https://groups.google.com/forum/#!topic/angular-ui/VNmOoaNw_hc，我的方法是创建一个模态状态提供程序，可以类似于$stateProvider配置模块来定义绑定到模态的状态时。当时，我特别感兴趣的是通过状态和模态事件来统一对模态解除的控制，这比您所要求的更复杂，所以这里有一个简化的例子 http://plnkr.co/edit/CoIhRixz15WZNF4pFHCx?p=preview.

关键是使模态成为状态的责任，并使用模态提供的钩子来使状态与模态通过范围或其 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();
                }
            }
        });
    };
})

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

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