javascript - 如何使用 ng-show 和 ng-click 使移动菜单 Angular 化？

Question

http://plnkr.co/edit/F8K66L?p=preview

我有一个 li 菜单，在 300px 时转到 display:none，而 mobile_nav 按钮则变为上。

现在我正在我的 Controller 中使用这个

ma​​in.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，调整大小时它也会在更大的 View 中保持关闭状态。如果单击其中的某个项目，还需要关闭移动菜单。

尝试过，但没有任何运气

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>

样式.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">