Question

在此示例中： https://plnkr.co/edit/O9fbLcTV7QPvqB3FpiAA?p=preview

当您单击汉堡菜单图标并选择一个导航项时，菜单将保持打开状态，直到您再次单击汉堡图标。选择菜单项时，有没有一种自动折叠的好方法？

我尝试过：

<li><a href="#" ng-click="isNavCollapsed = !isNavCollapsed;">Link 1</a></li>

这是可行的，但是当不在移动模式（在更大的屏幕上）上时，它将触发导航菜单折叠动画。

Answer 1

您可以使用纯JS添加事件侦听器，在其中可以检查窗口的宽度是否与您的移动断点相匹配。只需确保将对范围变量的实际更改包装在$apply函数中，否则AngularJS不会知道它：

https://plnkr.co/edit/ZzbXZ3lFxqX6Tlra46W5?p=preview

angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
  $scope.isNavCollapsed = true;
  $scope.isCollapsed = false;
  $scope.isCollapsedHorizontal = false;


  document.addEventListener('click', collapseMenu, false);

  function collapseMenu(event) {
    if(event.target.matches('.nav.navbar-nav li a')  && window.innerWidth < 768) {
      $scope.$apply(function() {
        $scope.isNavCollapsed = true;
      });
    }
  }

  // prevent memory leaks by removing listener when scope is destroyed
  $scope.$on("$destroy", function() {
    document.removeEventListener('click', collapseMenu, false);
  });

});

请注意，这将要求您使CSS和JS与断点值保持同步

Answer 2

我通过添加一个标志“ hamburger_open”解决了该问题，该标志在expand（）上触发true，而在collapsing（）上触发false。

<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed" expanding="hamburger_open=true" collapsing="hamburger_open=false">

...和hamburger_collapse函数，检查hamburger_open是否为真：

<li><a href="#" ng-click="hamburger_collapse()">Link 1</a></li>

  ...
  $scope.hamburger_collapse = function() {
    if($scope.hamburger_open) {
      $scope.isNavCollapsed = !$scope.isNavCollapsed;
    }
  }
  ...

https://plnkr.co/edit/IFIL8lgjK0oGDqZkLK5F?p=preview

考虑到每个现代移动菜单在选择菜单项后都会自动折叠，这似乎是一件很奇怪的事情。

带有UI Bootstrap的AngularJS-单击导航项时自动折叠菜单

2 个答案: