点击菜单列表项，折叠angularjs中的ui bootsrap导航栏

Collapse ui bootsrap navbar in angularjs on clicking menu list item

本文关键字：ui 中的 bootsrap 导航 angularjs 折叠 菜单 列表      更新时间：2023-09-26

我在Angular UI、Bootstrap Navbar Collapse和Javascript中遵循了该解决方案，并在列表项上单击ng，以确保在移动设备上单击菜单项时菜单会折叠（否则它只会保持打开状态）。

然而，我注意到，在大屏幕视图中，当单击列表项时，菜单上会出现闪烁效果，因为会触发菜单折叠切换。

为了解决这个问题，我在控制器中使用了以下功能，以确保点击甚至只在移动视图上触发：

$scope.toggleCollapse = function(){
    if($window.innerWidth < 768){
       $scope.navbarCollapsed = !$scope.navbarCollapsed
    }
}

但我敢肯定，在控制器中使用这样的屏幕大小是不好的做法。

我如何才能以一种更有角度的最佳实践方式来实现这一点？

我知道你两年前问过这个问题，所以你现在可能已经找到了更好的方法，但我在试图解决同样的问题时发现了你的问题。我很惊讶图书馆里没有这个。

    <div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
        <ul class="nav navbar-nav">
            <li><a ng-click="home()">Link 1</a></li>
            <li><a ng-click="home()">Link 2</a></li>
        </ul>
    </div>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
  $scope.isNavCollapsed = true;
  $scope.isCollapsed = false;
  $scope.isCollapsedHorizontal = false;
  $scope.home = function() {
    if(!$scope.isNavCollapsed){
      $scope.isNavCollapsed = true;
    }
    //$location.url('/'); you get the idea
  }
});

它在Plunker 中

相关文章：