angularjs – md-menus在使用ng-repeat时没有关闭

发布时间：2020-12-17 17:25:29 所属栏目：安全来源：网络整理

导读：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-buttonSubsection 1/md-button /md-menu-item /md-menu-content /md-menu/md-me

<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

解决方法

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

您必须在控制器中包含$mdMenu服务,并在单击以打开菜单时调用其隐藏方法.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!