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

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 个 Controller ？

替换:

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

与

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

当用户选择菜单项时关闭(例如，点击“联系/关于/服务”)

<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，因此上面还有其他内容。