單擊菜單列表項上的angularjs折疊ui bootsrap導航欄

Question

我在Angular UI，Bootstrap Navbar Collapse和Javascript上遵循了該解決方案，並使用ng單擊列表項以確保在移動設備上單擊菜單項（否則它保持打開狀態）時菜單折疊。

但是，我注意到在大屏幕視圖中，單擊列表項時菜單上會出現閃爍效果，因為觸發了菜單折疊切換。

為了解決這個問題，我在控制器中使用以下功能來確保僅在移動視圖上觸發點擊均勻：

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

但是我很確定，像在控制器內部那樣使用屏幕尺寸是不好的做法。

我該如何以更具angularjs的最佳做法來實現這一目標？

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