将 ui-router 与 Bootstrap-ui 模态一起使用 [英] Using ui-router with Bootstrap-ui modal

问题描述

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

I know this has been covered many times and most articles refer to this bit of code: Modal window with custom URL in AngularJS

但我就是不明白.我觉得这根本不是很清楚.我还发现了这个 jsfiddle 这实际上很棒，非常有帮助，只是它没有添加url 并允许我使用后退按钮关闭模式.

But I just don't get it. I don't find that to be very clear at all. I also found this jsfiddle 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.

这是我需要帮助的.

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

这是我的代码:

导航控制器:(这甚至是放置模态函数的正确位置吗?)

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();
    };
  });

这就是我激活模态的方式:

This is how I am activating the modal:

 <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>

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

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

推荐答案

将 modal 视为状态的视图组件是很直观的.使用视图模板、控制器和一些解析来进行状态定义.这些特征中的每一个也适用于模态的定义.更进一步，将状态入口链接到打开模式，将状态出口链接到关闭模式，如果你可以封装所有管道，那么你就有了一种机制，可以像使用 ui-sref<的状态一样使用/code> 或 $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.

这种方法的好处是您的应用继续主要与状态和与状态相关的概念进行交互.如果您后来决定将模态视图转换为传统视图，反之亦然，那么几乎不需要更改代码.

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-router 与 Bootstrap-ui 模态一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！