0
約束事を解決するためmdDialogを設定することができます終了アニメーションが終了します。現在のところ、Okボタンをクリックしてからresolve機能が起動されるまでの時間は〜300msであり、それは私には良いことではありません。アニメーション開始前にmdDialog約束を解決する
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>