使用 ng-repeat 时 md 菜单未关闭答案

【问题标题】：md-menus not closing when using ng-repeat使用 ng-repeat 时 md 菜单未关闭
【发布时间】：2016-05-23 16:57:30
【问题描述】：

<md-menu-bar>
  <md-menu ng-repeat="section in sections">
    <md-button class="navButton" ng-click="$mdOpenMenu()">
      {{section.name}}
    </md-button>
    <md-menu-content>
      <md-menu-item>
        <md-button>Subsection 1</md-button>
      </md-menu-item>
    </md-menu-content>
  </md-menu>
</md-menu-bar>

我正在做类似上面的事情，但不幸的是，如果我点击一个菜单，即使我点击其他按钮，它也会保持打开状态。

我只是希望它具有与

相同的行为

https://material.angularjs.org/latest/demo/menuBar

附：如果我不使用 ng-repeat（意思是菜单是静态的），它可以正常工作。

Problem Codepen

【问题讨论】：

指令 ng-repeat 创建了一个单独的范围，这就是为什么（很可能）您的示例有效。一种可能性是使用 controllerAs 语法并将您的方法分配给真正的指令控制器范围，而不是角度 $scope。然后，您将在您的方法中以 ctrlName.methodName(); 的形式打开新菜单。如果您创建一个小提琴会更容易
Pankaj 创建了一个 codepen。非常感谢！ @Maciej，请查看已编辑的问题。

标签： angularjs angular-material

【解决方案1】：

我刚刚碰到这个问题，并注意到 S.Klechkovski 发布的链接有一个由 christrude 制作的解决方法。它并不完美（正如其他用户指出的那样），但至少它有效。不妨在这里发一下。

您必须在控制器中包含$mdMenu 服务，并在您单击打开菜单时调用其hide 方法。

$scope.closeOthers = function() {
  $mdMenu.hide(null, { closeAll: true });
}

在 HTML 中

<button ng-click="closeOthers();$mdOpenMenu()">File</button>

这是经过编辑的Codepen。希望对你有帮助。

编辑

最好的解决方案是修补组件本身。即使在 Github 中找到的解决方法存在缺点（我在此处复制），它仍然是最好的。

但是这里有一个替代方案，仅用于探索目的；）This little frankenstein 使用承诺仅在所有动画完成后才打开下一个菜单。

标记

<button ng-click="closeOthers().then($mdOpenMenu);">File</button>

控制器

var lock = false;

$scope.closeOthers = function() {
  if(lock) {
    return;
  }

  var defer = $q.defer()
  lock = true;

  $mdMenu.hide(null, { closeAll: true }).then(function() {
    lock = false;
    defer.resolve();
  });

  return defer.promise;
}

【讨论】：

不幸的是，这不是一个完整的工作解决方案，尽管在某些情况下它已经足够好了。此解决方案的问题是，当您再次尝试 menu1->menu2->menu1 时，md-content 将不会显示，因为它在打开时仍然被 .hide() 击中
@ReyLibutan 我进行了编辑，但我仍然认为另一个是您在不修复组件的情况下获得的最好的（等待官方修复，或者运行可能不适合您的修补组件)。

【解决方案2】：

好问题！似乎这是尚未修复的已知错误。我在您的示例中添加了一条评论，并对现有issue 的问题进行了一些阐述。让我们希望它会尽快修复。

评论：

这是一个示例Codepen，说明了报告的问题。

经过一些研究，我注意到它的发生是因为 md-menu 指令使用 $scope.$emit 来触发 $mdMenuOpen 事件监听所有 md-menu 实例。 $emit 触发所有监听器父范围，包括发出事件的范围。那意味着如果所有 md-menu 实例都在同一个范围内，那么一切都是很好，但创建新范围的 ng-repeat 并非如此每个孩子。

【讨论】：

【解决方案3】：

我发现的唯一可靠的解决方法是

$scope.forceCloseMenu = function () {
    $('.md-open-menu-container').hide();
    $('.md-menu-backdrop').remove();
    $('.md-scroll-mask').remove();
};

每次点击菜单项时都会调用 forceCloseMenu()。

注意，这也需要 jQuery。

【讨论】：