Question

我正在使用UI Bootstrap，并希望在用户从下拉列表中选择项目或单击页面上其他位置的链接时关闭导航栏。

当我使用以下代码时，关闭导航栏的唯一方法是再次单击导航栏按钮。

有关如何使其正常工作的任何建议？我在SO上看过使用指令的例子，但我认为有一种更简单的方法可以实现这一点。

<nav class="navbar navbar-static-top navbar-default" ng-controller="NavbarCtrl as nav">
  <div class="container">
    <div class="navbar-header">
      <button type="button" ng-click="isCollapsed = !isCollapsed" class="navbar-toggle" >
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div collapse="isCollapsed" class="collapse navbar-collapse">

      <ul class="nav navbar-nav navbar-right" ng-controller="DropdownCtrl">
        <li><a ui-sref='contact'>Contact</a></li>
        <li><a ui-sref='about'>About</a></li>         
        <li><a ui-sref="selection">Services</a></li>
     </ul>  
   </div>
 </div>  
</nav>

.controller('DropdownCtrl', ['$scope', function ($scope) {
  $scope.status = {
      isopen: true
  };
  $scope.toggled = function(open) {
};

  $scope.toggleDropdown = function($event) {
      $event.preventDefault();
      $event.stopPropagation();
      $scope.status.isopen = !$scope.status.isopen;
     };
  }]);

Answer 1

首先！您是否有理由为一个导航栏创建2个控制器？

取代：

<nav class="navbar navbar-static-top navbar-default" ng-controller="NavbarCtrl as nav">

带

<nav class="navbar navbar-static-top navbar-default" ng-controller="DropdownCtrl">

要在用户选择菜单项时关闭（例如，点击“contact / about / services”）

<ul class="nav navbar-nav navbar-right">
    <li><a ui-sref='contact' ng-click="isCollapsed = !isCollapsed">Contact</a></li>
    <li><a ui-sref='about' ng-click="isCollapsed = !isCollapsed">About</a></li>         
    <li><a ui-sref="selection" ng-click="isCollapsed = !isCollapsed">Services</a></li>
</ul>

希望它有所帮助。

您可以查看我的plunker，请注意我已将导航栏添加到我现有的plunker中，因此它还有其他内容。

在选择或页面更改时使用UI Bootstrap自动关闭导航栏

1 个答案: