Skip to main content
 首页 » 编程设计

angularjs之将 ui-router 与 Bootstrap-ui 模态一起使用

2024年09月07日19傻小

我知道这已经被讨论过很多次,大多数文章都引用了这段代码:Modal window with custom URL in AngularJS

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

编辑:这是我需要帮助的。

所以让我试着解释一下我想要达到的目标。我有一个添加新项目的表格,我有一个链接“添加新项目”。我想当我单击“添加新项目”时会弹出一个模式,其中包含我创建的“add-item.html”表单。这是一个新状态,因此 url 更改为/add-item。
我可以填写表格,然后选择保存或关闭。关闭,关闭模态:p(多么奇怪)。但我也可以单击返回以关闭模式并返回上一页(状态)。

在这一点上,我不需要 Close 的帮助,因为我仍在努力让模态正常工作。

这是我的代码:

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

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> 

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

请您参考如下方法:

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

我研究过这个fairly extensively ,我的方法是创建一个模态状态提供程序,可以类似于 $stateProvider在配置模块以定义绑定(bind)到模态的状态时。当时,我特别感兴趣的是通过状态和模态事件来统一对模态解除的控制,这比你要求的更复杂,所以这里是 simplified example .

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

状态输入启动模态。状态导出将其关闭。模态可能会自行关闭(例如:通过背景点击),因此您必须观察并更新状态。

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