2016-01-14 159 views
2

我想弄清楚这是否可能。FAB操作可能在点击后保持打开状态吗?

概念是需要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 
      }; 

任何想法?

+0

自动关闭=真的吗? –

+0

这与popover相关,不影响FAB –

回答

6

如果我理解正确,您希望在其中一个操作被触发后保持快速拨号打开。您可以在动作按钮上使用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

+0

Duh那么容易。 Thx我明天会测试第一件事,我会接受它;) –

+1

那么我可以接受它,因为它是。它不适用于我的代码,因为像这样使用它,然后弹出窗口不会被调用,但如果可能的话通过函数调用该指令。 如果您还有其他方法@kuhnroyal,那么请更新答案。谢谢! –

+0

您应该可以在自定义指令中添加点击处理程序,但其中很大程度上取决于您的指令,所以如果没有某些代码,我不能多说。 – kuhnroyal

相关问题