角度材料FAB在mdDialog中不会关闭

Question

我有一个FAB问题，似乎初始化打开，我无法关闭它。菜单项似乎也是在线上占用空间而不是浮在它上面。

不确定我做了什么＆＃39;错误＆＃39;。

http://codepen.io/ed4becky/pen/eJwYvw

<md-dialog aria-label="Testing FAB in Dialog">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>Testing FAB in Dialog</h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="cancel()">
        <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
      </md-button>
    </div>
  </md-toolbar>
  <md-dialog-content style="max-width:800px;max-height:810px; ">
    <md-tabs md-dynamic-height md-border-bottom>
      <md-tab label="one">
        <md-content class="md-padding" style="width:600px;">
          <md-fab-speed-dial md-direction="left" ng-class="md-fling" ng-cloak>
            <md-fab-trigger>
              <md-button aria-label="menu" class="md-fab md-warn md-mini">
                X
              </md-button>
            </md-fab-trigger>
            <md-fab-actions>
              <md-button aria-label="no" class="md-fab md-raised md-mini md-warn">
                No
              </md-button>
              <md-button aria-label="yes" class="md-fab md-raised md-mini md-accent">
                Yes
              </md-button>
            </md-fab-actions>
          </md-fab-speed-dial>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-dialog-content>

  <md-dialog-actions layout="row">
    <md-button ng-click="cancel()" style="margin-right:20px;">
      Done
    </md-button>
  </md-dialog-actions>
</md-dialog>

Answer 1

  

这里有working plunker

要记住几件事：

1. 当您在评论中发帖时，请更新为最新的angular-material版本。 Plunker正在使用最新的1.1.1版本

2. ng-class接受表达式作为参数，因此如果不将值绑定到控制器变量，则应该按ng-class="md-fling"更改ng-class="'md-fling'"。

   < / LI>
3. 当您拨打$mdDialog.show(...)服务时，您正在设置parent: angular.element(document.body)。不确定你的用例是否确实需要这个，但如果删除它，它就能很好用。

代码，仅供参考：

查看：

...
<md-fab-speed-dial md-direction="left" ng-class="'md-fling'" ng-cloak>
    <md-fab-trigger>
      <md-button aria-label="menu" class="md-fab md-warn md-mini">
        X
      </md-button>
    </md-fab-trigger>
    <md-fab-actions>
      <md-button aria-label="no" class="md-fab md-raised md-mini md-warn">
        No
      </md-button>
      <md-button aria-label="yes" class="md-fab md-raised md-mini md-accent">
        Yes
      </md-button>
    </md-fab-actions>
</md-fab-speed-dial>
...

<强>控制器：

...
$scope.showTabDialog = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'tabDialog.tmpl.html',
      targetEvent: ev,
      clickOutsideToClose:true
    });
};
...

希望有所帮助