javascript - 使用 AngularJS 切换/隐藏 View 更改时 Bootstrap 导航栏折叠

Question

我正在使用 Bootstrap ui-module 和 AngularJS。我的问题是在移动 View 上，当用户更改 View 时，.navbar-collapse 保持打开状态，我希望它在 View 更改时折叠。我是一个 Angular 菜鸟，我刚刚发现了 Bootstrap 导航栏指令，但这是我当前正在使用的:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" ng-click="navbarCollapsed = !navbarCollapsed">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <ul class="list-inline list-unstyled">
        <li class="hidden-xs hidden-sm">
          <a ng-click="nav.setActive('home'); gotoTop()" href="#/home">
            <div class="sprite sprite-logo">
              <span class="sr-only">Home Button</span>
            </div>
          </a>
        </li>
        <li>
          <a ng-click="nav.setActive('home'); gotoTop()" href="#/home" class="navbar-brand">
            <div id="headerName">
              <h1 id="small-line">
                More Than 80 Years of Service
              </h1>
              <h1 id="big-line">
                BCOAPO
              </h1>
            </div>
          </a>
        </li>
      </ul>
    </div><!-- end navbar-header -->
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="main-navbar-collapse" collapse="navbarCollapsed">
      <ul class="nav navbar-nav navbar-right">

        <li class="hidden-sm" ng-class="{ active:nav.isActive('home') }">
          <a ng-click="nav.setActive('home'); gotoTop()" href="#/home"><span class="glyphicon glyphicon-home"></span> &nbsp;Home <span class="sr-only">Home</span></a>
        </li>

        <li class="dropdown">
          <a href class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
            <i class="fa fa-leanpub"></i> &nbsp;About Us <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li ng-class="{ active:nav.isActive('about') }">
              <a ng-click="nav.setActive('about'); gotoTop()" href="#/about"><i class="fa fa-users"></i> &nbsp;Who We Are</a>
            </li>
            <li ng-class="{ active:nav.isActive('scholarships') }">
              <a ng-click="nav.setActive('scholarships'); gotoTop()" href="#/scholarships"><span class="glyphicon glyphicon-education"></span> &nbsp;Scholarships</a>
            </li>
          </ul>
        </li>

        <li ng-class="{ active:nav.isActive('branches') }">
          <a ng-click="nav.setActive('branches'); gotoTop()" href="#/branches"><i class="fa fa-building"></i> &nbsp;Branches</a>
        </li>
        <li ng-class="{ active:nav.isActive('contact') }">
          <a ng-click="nav.setActive('contact'); gotoTop()" href="#/contact"><span class="glyphicon glyphicon-phone-alt"></span> &nbsp;Contact Us</a>
        </li>

      </ul>
    </div><!-- end main-navbar-collapse -->

  </div><!-- end container -->
  <div id="main-navbar-bumper"></div>
</nav>

JS

angular.module('BCOAPO').controller('NavCtrl', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {

  $scope.gotoTop = function() {
    $location.hash('top');

    $anchorScroll();
  };

  this.active;

  this.setActive = function(newActive) {
    this.active = newActive;
    return true;
  };

  this.isActive = function(currentActive) {
    if (this.active === currentActive) {
      return true;
    } else {
      return false;
    }
  };

  this.closeNav = function() {
    $('#main-navbar-collapse').hide();
    return true;
  };

  $scope.navbarCollapsed = true;

}]);

我尝试过的:

根据 Angular UI, Bootstrap Navbar Collapse and Javascript 使用指令 ng-click="navbarCollapsed = !navbarCollapsed" 和 collapse="navbarCollapsed"

根据 Controller 中的 this.closeNav 函数创建一个 jQuery 事件来隐藏导航栏折叠。但这导致导航栏永久隐藏。有没有办法简单地模仿导航链接上的点击事件并将其应用于切换按钮，但仅限于小于 992px 的屏幕？

this.closeNav = function() {
  $('.navbar-toggle').click();
};

Answer 1

这就是我的做法。我恢复到默认的 Bootstrap 导航栏，没有 Angular Directive(指令)并更改了此功能

$scope.gotoTop = function() {
  $location.hash('top');
  if ($(window).width() <= 768) {
    $('.navbar-toggle').click();
  }
  $anchorScroll();
};