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

Question

<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

PS：如果我不使用ng-repeat（意味着菜单是静态的），则可以正常使用。

问题代码笔

Answer 1

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

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

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

并在 HTML 中

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

这是一个编辑过的Codepen。我希望它有帮助。

编辑

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

然而，这里有一个仅用于探索目的的替代方案；）这个小弗兰肯斯坦使用承诺仅在所有动画完成后才打开下一个菜单。

标记

<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;
}