<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(意思是菜单是静态的),它可以正常工作.
解决方法
我刚刚碰到这个问题并注意到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; }
