如何使用 ng-show 和 ng-click 对移动菜单进行 Angularize？答案

【问题标题】：How to Angularize Mobile menu with ng-show & ng-click?如何使用 ng-show 和 ng-click 对移动菜单进行 Angularize？
【发布时间】：2015-03-30 12:19:38
【问题描述】：

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

我有一个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%;
  }
}

【问题讨论】：

标签： javascript angularjs angularjs-ng-click ng-show

【解决方案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">

【讨论】：