Question

当我使用ngRouter时，在小型设备中选择链接后，导航栏不会折叠

angilarjs：

var app = angular.module('MyTemplate',['ngRoute','ui.bootstrap']); 
app.controller("templateCtrl",function($scope){ 
  $scope.navbarCollapsed = true;
});

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/Page1', {
      templateUrl: 'Page1.html',
      controller: 'Page1Ctrl'
    })
    .when('/Page2', {
      templateUrl: 'Page2.html',
      controller: 'Page2Ctrl'
    })
    .otherwise({
      redirectTo: '/Page1'      
    });
}]);

HTML：

<div class="navbar-header">
  <button type="button" class="navbar-toggle" 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>
  <a class="navbar-brand" href="">Navigation bar</a>
</div>

<!-- nav links for toggling -->
<div class="collapse navbar-collapse" collapse="navbarCollapsed">
  <ul class="nav navbar-nav nav_width">
    <li><a href="#dashboardPage">Page1</a></li>
    <li><a href="#positionsPage">Page2</a></li>
  </ul>
</div>

请帮助解决此问题。谢谢......

Answer 1

更改代码如下：

var app = angular.module('MyTemplate',['ngRoute','ui.bootstrap']); 
app.controller("templateCtrl",function($scope){ 
    $scope.navbarCollapsed = true;
    $scope.collapseNavbar = function () {
        $scope.navbarCollapsed = true;
    };
});

和html

<div class="collapse navbar-collapse" collapse="navbarCollapsed">

<ul class="nav navbar-nav nav_width">
<li><a href="#dashboardPage" ng-click="collapseNavbar()">Page1</a></li>
<li><a href="#positionsPage" ng-click="collapseNavbar()">Page2</a></li>
</ul>

</div>

它向范围添加一个函数以强制崩溃属性为真

当我使用ngRouter时，导航栏不会折叠

1 个答案: