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

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

Problem Codepen

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中找到解决方法的缺点（我在这里复制），它仍然是最好的。

然而，这里只是出于探索目的的替代方案;）This little frankenstein使用promises仅在完成所有动画时打开下一个菜单。

<强>标记

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

Answer 2

好问题！似乎已知的bug尚未修复。我在您的示例中添加了评论，并对现有issue上的问题进行了详细说明。我们希望很快就能解决。

注释：

以下示例Codepen说明了报告的问题。

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

Answer 3

我找到的唯一可靠的解决方法是

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

每次单击一个菜单项时调用forceCloseMenu（）。

注意这也需要jQuery。

使用ng-repeat时md-menus不关闭

3 个答案: