Ionic Framework display dynamic value inside $ionicLoading

Question

How can I display a dynamic value inside of ionicLoading? Here is my code to show $ionicLoading, the idea here is to display download progress:

$rootScope.updateProgress = 0;
$ionicLoading.show({
  template: 'Updating...' + $rootScope.updateProgress
});

And later in my code I update $rootScope.updateProgress's value:

var iPecent = Math.round(downloadProgress.receivedBytes / downloadProgress.totalBytes * 100);
$rootScope.$apply(function () {
  $rootScope.updateProgress = iPecent;
});

However, $rootScope.updateProgress's value is not reflected when $ionicLoading is displayed on the screen - just shows initial value of 0. If I log out $rootScope.updateProgress's value it is reflecting current download progress.

Yes sir, file transfer plugin is used to download an update for my app. — Oleksiy
– Oleksiy, Commented Mar 12, 2016 at 18:59

user6032296 · Accepted Answer · 2016-03-08 05:48:17Z

2

Let me use cordova-plugin-file-transfer as an example:

    $ionicLoading.show({
        template: 'downloading...'
    });
    $cordovaFileTransfer.download(source, filePath, options, trustAllHosts).then(function (result) {
        console.log('download successfully!');
        $ionicLoading.hide();
    }, function (err) {
        alert('download failed!' + err);
    }, function (progress) {
        var downloadProgress = (progress.loaded / progress.total) * 100;
        $ionicLoading.show({
            template: "Downloaded：" + Math.floor(downloadProgress) + "%"
        });
        if (downloadProgress >= 100) {
            $ionicLoading.hide();
        }
    });

answered Mar 8, 2016 at 5:48

user6032296

Sign up to request clarification or add additional context in comments.

1 Comment

Oleksiy Over a year ago

This works for me! Thanks @Tom. By any chance to you know what is the performance impact on the application if you call $ionicLoadigng.show() a hundred times to display percentage change?

GONeale · Accepted Answer · 2016-03-08 05:40:16Z

0

I believe this was requested and added here https://github.com/driftyco/ionic/issues/699.

I haven't tested it, but based on the statement:

Use $ionicLoading.show() while the loader is open with new content, and it will update the content.

If you call .show() subsequent to a $ionicLoading already showing, it should update the content.. If this feature is in fact now part of Ionic, and you put in some sort of loop and delay routine, you should be able to achieve what you're after.

answered Mar 8, 2016 at 5:40

GONeale

26.5k22 gold badges112 silver badges149 bronze badges

Comments

Anurag Pandey · Accepted Answer · 2016-03-08 08:13:35Z

0

Hi i am using show percentage of image uploading like 19%...

var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
  $ionicLoading.show({
      template: 'Uploading Start....' + parseInt(100.0 * evt.loaded /evt.total) + '%',

         });

where evt is callback of progress method.

answered Mar 8, 2016 at 8:13

Anurag Pandey

7441 gold badge7 silver badges16 bronze badges

Collectives™ on Stack Overflow

Ionic Framework display dynamic value inside $ionicLoading

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related