在动画开始之前解析mdDialog promise

Question

我可以配置mdDialog以解决关闭动画结束前的承诺。目前，单击Ok按钮和resolve函数触发的时间之间的时间约为300毫秒，对我来说不合适。

您可以看到console的延迟以及div.tester更改背景颜色的时间。

(function(angular, undefined){
  "use strict";

  angular
  .module('demoApp', ['ngMaterial'])
  .controller('HomeController', HomeController)
  .controller('GreetingController', GreetingController);

  function HomeController($scope, $mdDialog) {
    $scope.showGreeting = showCustomGreeting;

    function showCustomGreeting() {
      $mdDialog.show({
        template:
        '<md-dialog>' +
        '  <md-content>Hello!</md-content>' +
        '  <div class="md-actions">' +
        '    <md-button ng-click="closeDialog()">' +
        '      Ok' +
        '    </md-button>' +
        '    <md-button ng-click="cancelDialog()">' +
        '      Cancel' +
        '    </md-button>' +
        '  </div>' +
        '</md-dialog>',
        controller: 'GreetingController',
      })
      .then(closeDialog, cancelDialod);

      function closeDialog() {
        //alert('closed');
        document.querySelector('.tester').classList.toggle('active');
        console.log('Closed, do something...');
        console.log(new Date() - startDate);
      }

      function cancelDialod() {
        console.log('Canceled, do something else...');
      }
    }
  }

  function GreetingController($scope, $mdDialog) {
    $scope.closeDialog = function() {
      startDate = new Date();
      console.log(new Date() - startDate);
      $mdDialog.hide();
    };
    $scope.cancelDialog = function() {
      $mdDialog.cancel();
    };
  }

})(angular);

var startDate;

body {
  padding:100px;
}
.md-button {
  margin-left:50px;
  text-transform: none;
  padding:10px;
  padding-left:15px;
  padding-right:15px;
}

.intro {
  margin-top:-50px;
  padding-left:75px;
  width:520px;
}

.tester {
  width: 150px;
  height: 150px;
  background: red;
}

.tester.active {
  background: green;
}

<link rel="stylesheet prefetch" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6/angular-material.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular-animate.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular-aria.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angular_material/0.6/angular-material.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>

<div  ng-app="demoApp" ng-controller="HomeController">
  <md-button class="md-raised md-primary" ng-click="showGreeting()">
    Greet 
  </md-button>
  <div class="tester"></div>
</div>    

Answer 1

似乎动画在解决承诺之前已经完成：

function dialogPopOut(container, options) {
  return options.reverseAnimate().then(function() {
    if (options.contentElement) {
      options.clearAnimate();
    }
  });
}

https://github.com/angular/material/blob/master/src/components/dialog/dialog.js#L1242

您可以使用自定义按钮创建自定义对话框，以触发所需的回调/发送事件，同时绕过默认的承诺回调。