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

单击后FAB操作是否可以保持打开状态？

1 个答案: