Available content in $ ionicLoading

I am trying to make a button clickable inside $ ionicLoading (template). I want to run the code if this button is clicked. Luckily ng-click doesn't work. Any work around? or I am making a fatal assumption. PS: I am new to angular and ionic

  $ionicLoading.show({
    template: '<ion-spinner></ion-spinner><br /><br /><p>Syncronising...</p>'
  });

       //stopSync function never fires
       $scope.stopSync = function(){
          $ionicLoading.hide();
       }

  //Shows the 'stop Sync' Button after two seconds 
  //for the user to fire the stopSync function
  $timeout(function() {
     $ionicLoading.show({
       template: '<ion-spinner></ion-spinner><br /><br /><p>Syncronising...</p><button class="button button-clear" ng-click="stopSync()">Stop Sync</button>'
     });
  }, 2000);

      

+3


source to share


1 answer


I solved the problem thanks to http://atomx.io/2015/01/ionic-closing-ionicloading-if-your-app-loses-network-connectivity/

I had to add scope: $scope

as part of the parameters



$ionicLoading.show({
            template: '<ion-spinner></ion-spinner><br /><br /><p>Syncronising...</p>'
          });


          $timeout(function() {
             //$ionicLoading.hide();
             $ionicLoading.show({
               template: '<ion-spinner></ion-spinner><br /><br /><p>Syncronising...</p><button class="button button-clear" ng-click="stopSync()">Stop Sync</button>',
               scope: $scope
             });
          }, 2000);

 $scope.stopSync = function(){
    $ionicLoading.hide();
 };

      

+4


source







All Articles