使用 ui-router 和 Bootstrap-ui 模式 [英] Using ui-router with Bootstrap-ui modal

问题描述

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

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

<小时>

这是我需要帮助的.

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

<小时>

这是我的代码:

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

angular.module('cbuiRouterApp').controller('NavbarCtrl', function ($scope, $location, Auth, $modal) {$scope.menu = [{'title': '家','关联': '/'}];$scope.open = function(){//不改变url打开模态$modal.open({templateUrl: 'components/new-item/new-item.html'});//我需要通过 $state.go 或类似的东西打开弹出窗口$scope.close = 函数(结果){$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('/登录');};$scope.isActive = 函数(路由){返回路线 === $location.path();};});

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

 
<a href='javascript: void 0;'ng-click='open()'>新项目</a>

new-item.html:

<h3 class="modal-title">我是模态！</h3>
<div class="modal-body"><ul><li ng-repeat="item in items"><a ng-click="selected.item = item">{{ item }}</a></li></ul>已选择:<b>{{ selected.item }}</b>

<div class="modal-footer"><button ng-click="ok()" class="btn btn-primary">OK</button><button ng-click="close()" class="btn btn-primary">OK</button>

此外，虽然这确实打开了一个模态，但它不会关闭它，因为我无法解决这个问题.

解决方案

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

我对这个进行了相当广泛的研究，并且我的方法是创建一个模态状态提供程序，在配置模块以定义绑定到模态的状态时，它可以类似于 $stateProvider 使用.当时，我对通过状态和模态事件统一控制模态解除特别感兴趣，这比您要求的要复杂，所以这里是 简化示例.

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

.provider('modalState', function($stateProvider) {var provider = this;this.$get = function() {返回提供者；}this.state = function(stateName, options) {var modalInstance;$stateProvider.state(stateName, {网址:options.url，onEnter:函数($modal，$state){modalInstance = $modal.open(options);modalInstance.result['finally'](function() {modalInstance = null;if ($state.$current.name === stateName) {$state.go('^');}});},退出:函数(​​){如果(模态实例){modalInstance.close();}}});};})

状态条目启动模态.状态出口关闭它.模态可能会自行关闭(例如:通过背景点击)，因此您必须观察并更新状态.

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

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

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.

---

Edit: This is what I need help with.

So let me try explain what I am trying to achieve. I have a form to add a new item, and I have a link 'add new item'. I would like when I click 'add new item' a modal pops up with the form I have created 'add-item.html'. This is a new state so the url changes to /add-item. I can fill out the form and then choose to save or close. Close, closes the modal :p (how odd) . But I can also click back to close the modal as well and return to the previous page(state). I don't need help with Close at this point as I am still struggling with actually getting the modal working.

---

This is my code as it stands:

Navigation Controller: (is this even the correct place to put the modal functions?)

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>

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.

解决方案

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.

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.

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