Угловой материал FAB не закрывается в mdDialog

Question

У меня проблема с FAB, которая, кажется, инициализируется открытым, и я не могу ее закрыть. Элементы меню также кажутся сопутствующим пространством на линии, а не плавающей над ним.

Не уверен, что я сделал «неправильно».

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'", если не связать значение переменной контроллера.

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 
    }); 
}; 
... 

Надеется, что это помогает