why button click event not fire in angular js?

Question

could you please tell me why click event not work when loader is display on click .Actually I created a situation when I am getting data too late and try to move from this situation (try to move next page but of loader is present on screen user not able to click any button on screen ) .Please click my code pen .When loader is display user not able to click on button .Mean I am not able to show alert on button click here is my code http://codepen.io/anon/pen/mJXXZY

when I click alert is not display

angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
$scope.cll=function(){
  alert("---")
}
  // Setup the loader
  $ionicLoading.show({
    content: 'Loading',
    animation: 'fade-in',
    showBackdrop: false,
    maxWidth: 200,
    showDelay: 0
  });

  // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.
  $timeout(function () {
    $ionicLoading.hide();
    $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
  }, 1000000);

});

it is cause your $ionicLoading.show() is creating a overlay that you cant click through, you need to hide the $ionicLoading before you can click the button, this is to stop people from clicking stuff while you want to let the app load — Jess Patton
– Jess Patton, Commented Jul 2, 2015 at 15:52
is there any other way to show loader so that while loading user able to click ? other than ionic loader — Pallavi Sharma
– Pallavi Sharma, Commented Jul 2, 2015 at 16:02

Jess Patton · Accepted Answer · 2015-07-02 15:55:16Z

1

You had a spelling error ng-clil instead of ng-click and when you call a function you need (); Here is your code fixed: Also you wont be able to click while the ionic loader is showing. Working code pen: http://codepen.io/anon/pen/zGRWpm

HTML:

    <html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Ionic Modal</title>

    <link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller="AppCtrl">

      <ion-view title="Home">
        <ion-header-bar>
          <h1 class="title">The Stooges</h1>
        </ion-header-bar>
        <ion-content has-header="true">
          <button ng-click="cll()">click button</button>
          <ion-list>
            <ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item>
          </ion-list>
        </ion-content>
      </ion-view>

  </body>
</html>

answered Jul 2, 2015 at 15:55

Jess Patton

2,4861 gold badge18 silver badges26 bronze badges

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

4 Comments

Pallavi Sharma Over a year ago

is there any other way to show loader so that while loading user able to click ? other than ionic loader

Jess Patton Over a year ago

not in ionci, you could use a third party loader or just use a w3schools.com/tags/tag_progress.asp. the point of ionic loader is to stop someone from clicking a button or a call on the app being triggered over and over again if it is already loading.

Pallavi Sharma Over a year ago

patton can we show simple gif image .than can we click on backgroinf

Jess Patton Over a year ago

what? Why don't you just show the loader for like 1 second and then kill it or only show it while you data is coming back, why do you want people trying to click on stuff while you have a big loading spinner in front of everything? if you really want loading and still let people click on stuff do something more like this codepen.io/ionic/pen/pEter

Collectives™ on Stack Overflow

why button click event not fire in angular js?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related