How to implement loading spinner to inappbrowser in ionic framework


im currently working in ionic framework with inappbrowser but any time i open the external url link it open another broswer but i want it indicate loading spinner so users will know it is loading, i dont know want it to open with system browser

 <div class="list">
      <a class="item item-avatar" href="#" ng-click="loadData()" onclick="'http://www.mysite', '_blank', 'location=yes'); return false; ">
          <img src="img/be1.png">
              <h2>site here</h2>

and my controller

    .controller('MyCtrl', function($scope, $ionicLoading, $timeout) {
    $scope.myTitle = 'Loading Sample';


    $scope.counter = 0;

    $scope.loadData = function() {

        $scope.loadingIndicator = ${
            template: '<ion-spinner icon="spiral"></ion-spinner>'

        $timeout(function() {

        }, 1500);



Problem courtesy of: gabmedia


In loadData() itself add

var'http://www.mysite', '_blank', 'location=no');

(location=no to hide url bar)

ref.addEventListener('loadstart', function() { $ }); ref.addEventListener('loadstop', function() { $ionicLoading.hide() });

Solution courtesy of: Aishwat Singh


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.