点击后是否有可能 FAB 动作保持打开状态？

Question

我正在尝试弄清楚这是否可能。

概念是需要让 FAB 动作在点击后保持打开状态。

他们需要的是我想要一个带有动作的经典 FAB 角材料 FAB 按钮。所以每一个被点击的动作按钮都会在它旁边打开一个弹出框来做一些事情，比如说一个简单的输入。

我这样做了，但是当我单击操作按钮时，操作按钮和弹出框消失了。

<md-fab-speed-dial md-trigger="click" md-direction="down" md-open="fab.isOpen"
            class="md-scale md-fab-top-right" ng-class="{ 'md-hover-full': fab.hover }"
                       >
            <md-fab-trigger>
                <md-button aria-label="menu" class="md-fab md-warn">
                    <i class="fa fa-plus"></i>
                </md-button>
            </md-fab-trigger>
            <md-fab-actions>
                <md-button aria-label="Create Data App" class="md-fab md-raised md-mini"
                     myapp-popover="app"
                     data-auto-close="true"
                     data-html="true"
                     data-placement="left"
                     data-animation="am-flip-x"
                     data-template-url="/templates/data-app/_v2/modules/popover-add-dataapp.html"
                     data-close-others="false"
                     data-prefix-event="url">
                  <i class="fa fa-database"></i>
                  <md-tooltip>Create Data App</md-tooltip>
                </md-button>
            </md-fab-actions>
        </md-fab-speed-dial>

我的范围很简单

$scope.fab = {
                isOpen : false,
                hover : false
            };

有什么想法吗？

Answer 1

如果我理解正确，您希望在触发其中一项操作后保持快速拨号打开。您可以在操作按钮上使用ng-click，然后在点击事件上调用stopImmediatePropagation()。

<md-fab-actions>
    <md-button ng-click="action($event)" aria-label="Create Data App" class="md-fab md-raised md-mini">
        <md-tooltip>Create Data App</md-tooltip>
    </md-button>
</md-fab-actions>

还有控制器功能：

$scope.action = function($event) {
    $event.stopImmediatePropagation();
    $window.alert('clicked');
};

codepen