使用UI的路由器引导的用户界面模式 [英] Using ui-router with Bootstrap-ui modal

问题描述

我知道这已经覆盖了很多次，大多数文章引用此位code的：<一href=\"http://stackoverflow.com/a/21213422/1031184\">http://stackoverflow.com/a/21213422/1031184

I know this has been covered many times and most articles refer to this bit of code: http://stackoverflow.com/a/21213422/1031184

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

But I just don't get it. I don't find that to be very clear at all. I also found this http://jsfiddle.net/sloot/ceWqw/3/ which was actually great, very helpful except this doesn't add the url and allow for me to use the back button to close the modal.

编辑：这就是我需要帮助

This is what I need help with.

所以，让我尝试解释我想实现。我有一个表格添加一个新的项目，我有一个链接添加新项。当我点击添加新项模态与我创建'附加item.html'的形式弹出，我想。这是为了让URL变为/加项新的状态。
我可以填写表格，然后选择保存或关闭。关闭，关闭模式：P（如何奇数）。但我也可以点击返回到关闭模式，以及并返回到previous页（状态）。
的我没有在这一点上需要关闭帮助，我仍然与实际得到的模态工作步履维艰。的

这是我的code，因为它代表：

This is my code as it stands:

导航控制器：（？这是甚至把模态函数中的正确位置）的

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

新item.html：

new-item.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>

此外，而这确实打开一个模式不会关闭它，因为我不能工作了这一点。

Also whilst this does open a modal it doesn't close it as I couldn't work that out.

推荐答案

这是直觉的认为一个模式作为一个国家的视图组件。采取与视图模板，控制器，也许一些可解决一个状态定义。各个这些特征也适用于一个模态的定义。走了一步，状态条目链接到开模和国家退出关闭模式，如果你可以封装所有的管道，那么你可以与 UI使用就像一个状态的机制-sref 或 $ state.go 进入和返回按钮或多个特定模式的触发器出境。

It's intuitive to think of a modal as the view component of a state. Take a state definition with a view template, a controller and maybe some resolves. Each of those features also applies to the definition of a modal. Go a step further and link state entry to opening the modal and state exit to closing the modal, and if you can encapsulate all of the plumbing then you have a mechanism that can be used just like a state with ui-sref or $state.go for entry and the back button or more modal-specific triggers for exit.

我已经研究了这个相当广泛的，我的方法是创建一个配置模块定义注定要情态动词时态可能被类似用于 $ stateProvider 模式状态提供商。当时，我是在过通过它获得比你问的更复杂，所以这里是一个的简化的例子。

I've studied this fairly extensively, and my approach was to create a modal state provider that could be used analogously to $stateProvider when configuring a module to define states that were bound to modals. At the time, I was specifically interested in unifying control over modal dismissal through state and modal events which gets more complicated than what you're asking for, so here is a simplified example.

的关键是模态国家的责任和使用模式提供了保持状态具有独立的交互同步的模式，通过范围或它的UI支持挂钩。

The key is making the modal the responsibility of the state and using hooks that modal provides to keep the state in sync with independent interactions that modal supports through the scope or its 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();
                }
            }
        });
    };
})

国家进入启动模式。国家退出关闭它。该模式可能会关闭其自身（例如：通过点击背景），所以你要观察和更新状态

State entry launches the modal. State exit closes it. The modal might close on its own (ex: via backdrop click), so you have to observe that and update the state.

这种方法的好处是，你的应用程序将继续与国家和国家相关的概念主要是进行交互。如果以后决定把模态成为一个传统观点或反之亦然，那么很少code需要改变。

The benefit of this approach is that your app continues to interact mainly with states and state-related concepts. If you later decide to turn the modal into a conventional view or vice-versa, then very little code needs to change.

这篇关于使用UI的路由器引导的用户界面模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！