如何使用 ng-show 和 ng-click 调整移动菜单的角度？

Question

我有一个 li 菜单，在 300px 进入 display:none，而 mobile_nav 按钮打开。

现在在我的控制器中我正在使用这个

main.js

$scope.mobileMenu = function() {
  var menu = document.getElementById('main_nav');

  if (menu.style.display == 'block') {
      menu.style.display = 'none';
  } else {
      menu.style.display = 'block';
  }
};

如果我打开移动菜单，然后关闭它，即使我在 CSS 中有 display:block，它在调整大小时仍会在较大的视图中保持关闭状态。如果在其中单击某个项目，还需要关闭移动菜单。

尝试过这个，但没有任何运气

index.html

<div
  ng-click="isMobileNavOpen = !isMobileNavOpen"
  class="mobile_nav">
  =
</div>

<nav id="main_nav" ng-init="isMobileNavOpen = true" ng-show="isMobileNavOpen">
  <ul>
    <li><a ui-sref="home">Home</a></li>
    <li><a ui-sref="about">About</a></li>
  </ul>
</nav>

style.css

// the button
.mobile_nav {
  display: none;
}

@media all and (max-width: 300px) {
  .mobile_nav {
    display: block;
  }      

  #main_nav {
    display: none;
  }

  #main_nav li {
    float: none;
    margin-bottom 20px;
  }

  #main_nav a {
    width: 100%;
  }
}

Answer 1

找到完美的图书馆！

https://github.com/AnalogJ/matchmedia-ng

^ 这是解决我的问题的代码（需要 Angular 检测尺寸的方法）

var unregister = matchmedia.onPhone( function(mediaQueryList){
    $scope.isPhone = mediaQueryList.matches;
});

必须使用覆盖来调整我的像素规格：

angular.module('myapp', ['matchmedia-ng']).config(['matchmediaProvider', function (matchmediaProvider) {
    matchmediaProvider.rules.phone = "(max-width: 500px)";
    matchmediaProvider.rules.desktop = "(max-width: 1500px)";
}]);

还必须继续使用 2 个不同的导航：/ 仍将尝试尝试使用它，看看我是否可以只使用 1 个导航：

<div class="mobile_nav noselect">
    <div ng-click="isMobileNavOpen = !isMobileNavOpen" class="icon-menu"></div>
</div>

<nav id="main_nav">

<nav id="mobile_nav" ng-show="isMobileNavOpen">

如何使用 ng-show 和 ng-click 调整移动菜单的角度？

How to Angularize Mobile menu with ng-show & ng-click?

javascript

angularjs

angularjs-ng-click

ng-show