使用 Bootstrap 和 AngularJS 折叠事件 - 导航栏

Question

所以我查看了一些关于此问题的问题，但未能找到适合我的解决方案。

我正在使用 Bootstrap (v 3.3.5) 在我的网站顶部创建一个导航栏菜单。我也在使用 AngularJS (v 1.4.4) 和 Angular-UI-Bootstrap (v 0.13.3)。当菜单折叠并显示时，您必须切换菜单按钮才能将其关闭。单击菜单链接或菜单外部无效。

所以我尝试了在 Whosebug 上讨论的几种解决方案，但其中 none 对我有用。经过几个小时的努力，我想出了一个选项，可以在路线更改时关闭菜单 (AngularJS $route)，但我的代码似乎并没有起到作用。我想要一些建议。

(function (Directives, undefined)
{
 app.Modules.app.directive("collaspeListener", [ function () /* AngularJS Directive */
 {
  return {
   restrict: 'A',
   link: function(scope, element, attr) {
    $('#navcollaspe').on(shown.bs.collapse, function () { /*Bootstrap collapse JS */
     console.log("shown");
     $rootScope.$on('$routeChangeSuccess', function() { /*AngularJS $route */

      $('#navcollaspe').collapse('hide') /* Bootstrap collapse JS */
     })
    })
   }
  }
 }]);
}(app.Directives = app.Directives || {} ));

<nav class="navbar navbar-inverse navbar-fixed-top">
 <div class="container" collapse-listener="">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed visible-xs-block" data-toggle="collapse" data-target="#navcollapse"  aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
    <div class="navbar-brand"><a href="#/"><img src="assets/images/logos/logo.png" class="img-responsive" alt="Logo"></img></a></div>
    <div class="navbar-text navbar-left hidden-xs"><a href="#/">Main Title</a></div>
    <div class="navbar-text navbar-left visible-xs-block "><a href="#/">Short Title</a></div>
    <div class="outside-nav">
     <ul class="nav navbar-nav navbar-right visible-sm-block dropdown-menu-left">
       <li ><a href="#/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span><b class="caret"></b></a>
     <ul class="dropdown-menu">
         <li><a href="#/systems">...</a></li>
         <li><a href="#/systems">...</a></li>
         <li><a href="#/systems">...</a></li>
         <li><a href="#/systems">...</a></li>
         <li><a href="#/systems">....</a></li>
         <li><a href="#/systems">...</a></li>
      <li><a href="#/systems">...</a></li>
      <li><a href="#/systems">...</a></li>
     </ul>
    </li>
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><b class="caret"></b></a>
     <ul class="dropdown-menu">
      <li class="dropdown-header">Applications</li>
         <li><a href="#/applicationsPage">...</a></li>
     </ul>
    </li>
       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span><b class="caret"></b></a>
     <ul class="dropdown-menu">
      <li class="dropdown-header">Company</li>
         <li><a href="#/company"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About US</a></li>
         <li><a href="#/company"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Company Blogs</a></li>
         <li><a href="#/company"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> Contact Us</a></li>
     </ul>
    </li>
       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">
      <span class="glyphicon glyphicon-user" aria-hidden="true"></span><b class="caret"></b></a>
     <ul class="dropdown-menu">
      <li class="dropdown-header">My Account</li>
      <li><a href="#/"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Profile</a></li>
      <li><a href="#/"><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> Messages <span class="badge">{{ user.newMessagesCount }}</span></a></li>
         <li><a href="#/"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Settings</a></li>
         <li class="divider"></li>
         <li><a href="#/"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Sign Out</a></li>
     </ul>
    </li>
    <li><a href="#/"><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span></a></li>
   </ul>
    </div><!-- End outside-nav -->
  </div><!-- End navbar-header -->
  <div class="collapse navbar-collapse" id="navcollapse">
   <ul class="nav navbar-nav navbar-right">
       <li class="active"><a href="#/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> Systems<b class="caret"></b></a>
     <ul class="dropdown-menu">
         <li><a href="#/systems" data-toggle="collapse" data-target="#navcollapse">...</a></li>
         <li><a href="#/systems">...</a></li>
         <li><a href="#/systems">...</a></li>
         <li><a href="#/systems">...</a></li>
         <li><a href="#/systems">...</a></li>
         <li><a href="#/systems">...</a></li>
      <li><a href="#/systems">....</a></li>
      <li><a href="#/systems">...</a></li>
     </ul>
    </li>
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> Applications<b class="caret"></b></a>
     <ul class="dropdown-menu">
         <li><a href="#/applicationsPage">...</a></li>
     </ul>
    </li>
       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> Company<b class="caret"></b></a>
     <ul class="dropdown-menu">
         <li><a href="#/company"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About US</a></li>
         <li><a href="#/company"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Company Blogs</a></li>
         <li><a href="#/company"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> Contact Us</a></li>
     </ul>
    </li>
       <li class="dropdown"><a class="dropdown-toggle"  data-toggle="dropdown">
      <span class="glyphicon glyphicon-user" aria-hidden="true"></span> My Account <span class="badge">{{ user.newMessagesCount }}</span><b class="caret"></b></a>
     <ul class="dropdown-menu">
      <li><a href="#/"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Profile</a></li>
      <li><a href="#/"><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> Messages <span class="badge">{{ user.newMessagesCount }}</span></a></li>
         <li><a href="#/"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Settings</a></li>
         <li class="divider"></li>
         <li><a href="#/"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Sign Out</a></li>
     </ul>
    </li>
   </ul>
  </div><!-- End navbar-collapse -->
 </div><!-- End Navbar Container -->
</nav><!-- End Top Navbar -->

Answer 1

因此，在查看代码并进行更多研究后，我找到了一种方法，可以在单击其中的 link 时折叠菜单。

我发现有几个地方拼错了，修复后得到了执行 console.log('shown') 的代码，但没有别的。所以我最终找到了一个关于如何使用 Angular-UI 正确使用 AngularJS 和 Bootstrap 的很棒的教程。教程来自 Chris Sevilleja.

所以在调整我的代码以遵循 Angular-UI 建议后，它按预期工作。我还根据上面评论中 Hinrich 的推荐注入了 $rootScope。我已经包含了新代码，希望它能为其他人节省一些时间和挫折感。 :)

(function (Controllers, undefined)
{
 app.Modules.app.controller("navController", ['$scope', function ($scope)
 {
  $scope.isCollapsed = true;
 }]);

}(app.Controllers = app.Controllers || {} ));

(function (Directives, undefined)
{app.Modules.app.directive("collapseListener", ['$rootScope', function ($rootScope)
 {
  return {
   restrict: 'A',
   controller: 'navController',
   link: function(scope, element, attr) {
    $rootScope.$on('$routeChangeSuccess', function(event, current, previous, rejection) {
     if (scope.isCollapsed == false) {
     scope.isCollapsed = true;
     }
    })
   }
  }
 }]);
}(app.Directives = app.Directives || {} ));

<nav class="navbar navbar-inverse navbar-fixed-top">
 <div class="container" collapse-listener="">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
    <div class="navbar-brand"><a href="#/"><img src="assets/images/logos/logo.png" class="img-responsive" alt="Logo"></img></a></div>
    <div class="navbar-text navbar-left"><a href="#/">Full Title</a></div>
  </div><!-- End navbar-header -->
  <div class="collapse navbar-collapse" collapse="isCollapsed">
   <ul class="nav navbar-nav navbar-right">
       <li class="active"><a href="#/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
       <li dropdown=""><a dropdown-toggle=""><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> Systems<b class="caret"></b></a>
     <ul class="dropdown-menu">
         <li><a href="#/systems">...</a></li>
         <li><a href="#/systems">...</a></li>
         <li><a href="#/systems">...</a></li>
     </ul>
    </li>
   </ul>
  </div><!-- End navbar-collapse -->

 </div><!-- End Navbar Container -->
</nav><!-- End Top Navbar -->

使用 Bootstrap 和 AngularJS 折叠事件 - 导航栏

Collapse Event using Bootstrap and AngularJS - Navbar

javascript

twitter-bootstrap

angularjs

angularjs-routing

angular-ui-bootstrap