Question

我在div中有一个弹出菜单。

我正在使用ng-click="showNavMenu = !showNavMenu"来控制div的开启和关闭。

但是对于每个我使用它的链接，我需要复制该代码，以便在加载新视图后菜单实际关闭。

我想避免这种代码重复 - 关于我能做什么的任何想法：

<div class="navMenu" ng-show="showNavMenu">
      <ul>
        <li><a href="/about" ng-click="showNavMenu = !showNavMenu">About</a></li>
        <li><a href="/privacy" ng-click="showNavMenu = !showNavMenu">Privacy</a></li>
        <li><a href="/contact" ng-click="showNavMenu = !showNavMenu">Contact Us</a></li>
      </ul>
</div>

Answer 1

改用功能 <li><a href="/about" ng-click="toggleMenu()">About</a></li>

在控制器中定义此功能

$scope.toggleMenu = function() {
    $scope.showNavMenu = !$scope.showNavMenu;
}

Answer 2

如何将ng-click放在父ul上？我不是非常精通角度的事件冒泡/传播规则 - 你可能需要对你的函数或ng-click属性进行一些调整。或者它可能会起作用。

function toggleMenu() {
   $scope.showNavMenu = !$scope.showNavMenu
}

-----

<ul ng-click="toggleMenu()">

Answer 3

我会将导航逻辑移动到控制器代码，对我来说似乎是最干净的解决方案。所以你的标记看起来像：

<div class="navMenu" ng-show="showNavMenu">
  <ul>
    <li><a href ng-click="navigate('about')">About</a></li>
    <li><a href ng-click="navigate('privacy')">Privacy</a></li>
    <li><a href ng-click="navigate('contact')">Contact Us</a></li>
  </ul>
</div>

在你的控制器内：

$scope.navigate = function(path) {
  $scope.showNavMenu = false;
  window.location.href = '/' + path; //better navigate via router
}

隐藏Div而不重复代码

3 个答案: