angularjsのpromise処理を使用時、onsen ui のmodalが表示されない
angularjsのpromise処理を使用時に、onsen ui のmodalが表示されずに悩んでいます。
Controllerでサービスの終了を待つ間、onsen uiのmodalを表示させたいのですが、うまくいきません。修正点がありましたら、ご教授いただければと思います。
コードは以下の通りです。10秒かかるサービスをまって、文字列を表示するサンプルです。
index.html
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *;
style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<script src="js/app.js"></script>
</head>
<body>
<ons-modal var="myModal">
MODALを表示中…
</ons-modal>
<ons-page ng-controller="MainController">
<h1>Modal test</h1>
<div>{{str}}</div>
</ons-page>
</body>
</html>
app.js
// This is a JavaScript file
console.log("Javascript Start ---------------------------" + Date());
// AngularJS + OnsenUI
var app = angular.module("myApp", ["onsen"]);
// 時間がかかる処理
app.factory("jikanKakaruFactory", ["$q" ,"$timeout", function($q, $timeout) {
return {
getString: function() {
var d = $q.defer();
$timeout(function() {
d.resolve("処理が終了しました。" + Date());
},10000);
return d.promise;
}
};
}]);
// コントローラー
app.controller("MainController", ["$scope", "$q", "jikanKakaruFactory", function($scope, $q, jikanKakaruFactory) {
// モーダル表示
myModal.show();
// 時間がかかる処理
jikanKakaruFactory.getString()
.then(function(str) {
$scope.str = str;
});
// モーダル非表示
myModal.hide();
}]);