当我使用ngRouter时，导航栏不会折叠 [英] When I use ngRouter, navbar is not collapsing

问题描述

angilarjs：

<$>

使用ngRouter时，导航栏不会折叠p $ p> var app = angular.module（'MyTemplate'，['ngRoute'，'ui.bootstrap']）;
app.controller（templateCtrl，function（$ scope）{
$ scope.navbarCollapsed = true;
}）;
$ b 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 =buttonclass =navbar-toggleng-click =navbarCollapsed =！navbarCollapsed> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =>导航栏< / a> 
< / div> 
 
<！ - 用于切换的导航链接 - > 
< div class =collapse navbar-collapsecollapse =navbarCollapsed> 
< ul class =nav navbar-nav nav_width> 
< li>< a href =＃dashboardPage> Page1< / a>< / li> 
< li>< a href =＃positionsPage> Page2< / a>< / li> 
< / ul> 
< / div> 
  

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

解决方案

更改代码如下：

  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-collapsecollapse =navbarCollapsed> 
 
< ul class =nav navbar-nav nav_width> 
< li>< a href =＃dashboardPageng-click =collapseNavbar（）> Page1< / a>< / li> 
< li>< a href =＃positionsPageng-click =collapseNavbar（）> Page2< / a>< / li> 
< / ul> 
 
< / div> 
  

它将一个函数添加到作用域以强制collapse属性为true

When I use ngRouter, navbar is not collapsing after selecting a link in small devices

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>

Please help to fix this issue. Thank you...

解决方案

Change the code like this:

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

And the 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>

It's adding a function to the scope to force the collapse property to true

这篇关于当我使用ngRouter时，导航栏不会折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！