Onsenui modal is not displayed when using angularjs promote processing

I am worried that the onsenui modal is not displayed when I use angularjs promote processing.
While waiting for the service to end on the controller, I want to display the onsenui modal, but it doesn't work.Please let me know if there are any corrections.

The code is as follows.This is a sample that waits for a service that takes 10 seconds and displays a string.

index.html

<!DOCTYPE HTML>
<htmlng-app="myApp">
<head>
    <metacharset="utf-8">
    <meta name="viewport" content="width=device-width, 
        initial-scale=1, maximum-scale=1, user-scale=no">
    <metahttp-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">
    Displaying MODAL...
</ons-modal>
<ons-pageing-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"));

// time-consuming processing
app.factory("jikanKakaruFactory",["$q", "$timeout", function($q,$timeout){
    US>return{
        getString: function() {

            vard = $q.defer();

            $timeout(function(){
                d.resolve("Process is complete." + Date());
            },10000);

            return.promise;
        }
    };
}]);

// controller
app.controller("MainController",["$scope", "$q", "jikanKakaruFactory", function($scope,$q,jikanKakaruFactory){

    // modal representation
    myModal.show();

    // time-consuming processing
    jikanKakaruFactory.getString()
        .then(function(str){
            $scope.str = str;
        });

    // modal hiding
    myModal.hide();
}]);

monaca onsen-ui angularjs

2022-09-30 14:13

1 Answers

Call myModal.hide() after resolving the time-consuming process.

// Controller
app.controller("MainController",["$scope", "$q", "jikanKakaruFactory", function($scope,$q,jikanKakaruFactory){

    // modal representation
    myModal.show();

    // time-consuming processing
    jikanKakaruFactory.getString()
        .then(function(str){
            $scope.str = str;

            // modal hiding
            myModal.hide();
        });
}]);

2022-09-30 14:13

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656