AngularJS - Show / Hide Loader

Question

Question about "scope" in angularJS I try to show a loading animation when i do a search.

In my controller i create a var called "loader" and in the HTML i put ng-show="loader" on the div that i would like to show/hide

Simple... But...

I can show the loader but can't hide it...

Here is my code...

HTML :

 <secion ng-controller="ContactsCtrl">
    <div class="loader" ng-show="loading"></div>

    <h2>Contacts</h2>

    <form class="form-search">
        <input type="text" ng-model="s_search" placeholder="Search for a contact...">
        <button type="submit" class="btn" ng-click="search()">Search</button>    
    </form>

    <div id="resultContact"></div>

</section>

JS :

function ContactsCtrl($scope){
    $scope.loading = false;

    $scope.endLoading = function(){
        $scope.loading = false;
    }     

    $scope.search = function() {
        $scope.loading = true;

        setTimeout($scope.endLoading, 1000);
    }
}

I suppose the problem is with the "scope inherits" but i don't see my mistake

Nikos Paraskevopoulos · Accepted Answer · 2013-11-15 15:56:23Z

5

You need to call $scope.$apply() whenever you call Angular outside of Angular (e.g. jQuery event handlers or, here, setTimeout()). But the best way is to use the Angular service, $timeout (docs) that does the same job and calls $apply.

answered Nov 15, 2013 at 15:56

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

1 Comment

eddiec Over a year ago

Using $timeout will also enable you to test your code.

Mike Robinson · Accepted Answer · 2013-11-15 15:56:27Z

setTimeout is outside the digest cycle of Angular. You need to use $timeout to alert angular about your function.

function ContactsCtrl($scope, $timeout){
    $scope.loading = false;

    $scope.endLoading = function(){
        $scope.loading = false;
    }     

    $scope.search = function() {
        $scope.loading = true;

        $timeout($scope.endLoading, 1000);
    }
}

I would like to point out that it seems like you're doing some kind of "loading", which implies using $http or other data lookup. Instead of setting a timer, you could tie a function to the completion event, or set a watcher on the data that changes.

For example:

$scope.$watch("searchData", function () {
  $scope.loading = false;
}, true);


$scope.$search = function () {
  $scope.loading = true;

  $http.get("/searchUrl", function (res) {
    $scope.searchData = res;
  });
});

Collectives™ on Stack Overflow

AngularJS - Show / Hide Loader

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related