Question

我使用的是Bootstrap ui-module和AngularJS。我的问题出在移动视图上，当用户更改视图时，.navbar-collapse保持打开状态，我希望它在视图更改时折叠。我是一个角落的菜鸟，我刚刚发现了bootstrap navbar指令，但这是我目前使用的：

<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"

根据控制器中的this.closeNav函数创建jQuery事件以隐藏导航栏折叠。但这导致导航栏永久隐藏。有没有办法简单地模仿导航链接上的点击事件并将其应用到切换按钮，而只是在小于992像素的屏幕上？

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

Answer 1

你试过这个吗？

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

};

或观察状态变化？

  $scope.stateChange = $state;
   $scope.$watch('statechange.current.name',function(){
   $scope.navbarCollapsed = false;
   }

希望有所帮助

Answer 2

这就是我如何去做..我恢复到没有角度指令的默认bootstrap导航栏并改变了这个功能

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

使用AngularJS切换/隐藏Bootstrap Navbar折叠视图更改

2 个答案: