Му按钮(class="patternButton"
)包含另一个class="patternMenuBtn"
应该显示菜单的小按钮()。这是标记:
<div class="patternsBlock">
<md-button class="patternButton"
ng-class="{selected: view.id == selectedViewId, globalView: view.id.indexOf(userViewIdPrefix) == -1}"
ng-repeat="view in loadedViews" ng-click="selectPattern(view)">
{{view.name}}
<md-menu md-offset="26 40" ng-show="view.id.indexOf(userViewIdPrefix) != -1">
<md-button class="md-fab md-mini patternMenuBtn" ng-click="openMenu($mdOpenMenu, $event)">
</md-button>
<md-menu-content width="2">
<md-menu-item>
<md-button ng-click="deleteUserView(view, $index)">
<span md-menu-align-target>Delete</span>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="openViewPanel(view, $index)">
<span md-menu-align-target>Edit</span>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-button>
</div>
这里是openMenu
处理程序:
$scope.openMenu = function ($mdOpenMenu, ev) {
ev.stopPropagation();
$mdOpenMenu(ev);
};
这在Chrome浏览器中有效,但在Firefox中不适用。实际上,openMenu
没有调用函数。
似乎唯一的解决方案是将按钮一个接一个地放置,而不是一个个放置在另一个按钮中。我的新标记如下所示:
<div class="patternsBlock">
<div class="patternButtonContainer" ng-repeat="view in loadedViews"
ng-class="{selected: view.id == selectedViewId, globalView: view.id.indexOf(userViewIdPrefix) == -1}">
<md-button class="patternButton" ng-click="selectPattern(view)">
{{view.name}}
</md-button>
<md-menu md-offset="26 40" ng-show="view.id.indexOf(userViewIdPrefix) != -1">
<md-button class="md-fab md-mini patternMenuBtn" ng-click="openMenu($mdOpenMenu, $event)"></md-button>
<md-menu-content width="2">
<md-menu-item>
<md-button ng-click="deleteUserView(view, $index)">
<span md-menu-align-target>Delete</span>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="openViewPanel(view, $index)">
<span md-menu-align-target>Edit</span>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</div>
然后,我使用CSS使菜单按钮显示在主按钮上方。
重要的是设置position:relative
上patternButtonContainer
和position:absolute
到<md-menu>
。这种方法允许将菜单按钮放置在所需的任何位置,而不会影响容器的大小。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句