Question

我按照Angular UI, Bootstrap Navbar Collapse and Javascript处的解决方案，并在列表项上使用了ng-click，以确保在移动设备上单击菜单项（否则它只是保持打开状态）时菜单会崩溃。

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

要解决此问题，我在控制器中使用以下功能，以确保仅在移动视图上触发点击甚至：

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

但我很确定在控制器内使用屏幕尺寸是不好的做法。

我怎样才能以更有棱角的最佳实践方式实现这一目标？

Answer 1

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

    <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

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

1 个答案: