

angularjsのpromise処理を使用時に、onsen ui のmodalが表示されずに悩んでいます。  
Controllerでサービスの終了を待つ間、onsen
uiのmodalを表示させたいのですが、うまくいきません。修正点がありましたら、ご教授いただければと思います。

コードは以下の通りです。10秒かかるサービスをまって、文字列を表示するサンプルです。

index.html

[code]

    <!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>
    
[/code]

app.js

[code]

    // 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();
    }]);
    
[/code]


CC BY-SA 3.0
2015-12-07T20:14:47.703
19735
2016-12-02T06:47:17.710
13297
question
monaca onsen-ui angularjs
angularjsのpromise処理を使用時、onsen ui のmodalが表示されない


`myModal.hide()`は時間がかかる処理の解決後に呼んでください。

[code]

    // コントローラー
    app.controller("MainController", ["$scope", "$q", "jikanKakaruFactory", function($scope, $q, jikanKakaruFactory) {
    
        // モーダル表示
        myModal.show();
    
        // 時間がかかる処理
        jikanKakaruFactory.getString()
            .then(function(str) {
                $scope.str = str;
    
                // モーダル非表示
                myModal.hide();
            });
    }]);
    
[/code]


CC BY-SA 3.0
2015-12-07T23:38:32.167
19739
2015-12-07T23:38:32.167
8532
19735
answer