使用AngularJS切换/隐藏Bootstrap导航栏视图更改

Question

我正在使用Bootstrap UI模块和AngularJS。我的问题是在移动视图上，当用户更改视图时，.navbar-collapse保持打开状态，并且我希望当视图更改时它会折叠。我是一个菜鸟到角，我只是发现了关于引导导航栏的指令，但我现在使用的是这里的：

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

}]); 

我已经试过：

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

创建一个jQuery事件隐藏导航栏崩溃按照该this.closeNav功能在我的控制器中。但是这导致了导航栏永久隐藏。有没有办法简单地模仿导航链接上的点击事件并将其应用于切换按钮，而只能在小于992px的屏幕上使用？

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

这是我如何去了解它。我恢复到无角指令标准的引导和导航栏改变这个功能

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