0

I'm familar with JQuery but new to AngularJS. One requirement I'm working on is: to display a loading icon and some message above a given HTML element (e.g. DIV) when starts a http request and remove it when http request is done.

In jquery, it's simple, in the ajax handlers, I can use 

$('#targetDiv').append(
  '<div class="loading">
       <img src="loading.gif"/>Loading, please wait...</div>'
);

This code simply operates DOM elements and has nothing to do with models. In AngularJS, how can I do it? Should I use directives?

  1. Where should the code live? Obviously, the code should not be in the controller files or the view files.
  2. How can glue the controller code, the view and the loading code together?

Best regards, Zach

Zach
  • 5,715
  • 12
  • 47
  • 62
  • I found a solution for images `onload` here: http://stackoverflow.com/questions/17547917/image-load-event-in-angularjs , may be it will be useful for you – Ivan Chernykh Aug 01 '13 at 07:53

1 Answers1

2

It's quite simple actually:

  1. display the loading div if some scope flag is true:

    <div class="loading" ng-show="shouldLoadingDivBeDisplayed">
    ...
</div>

  2. In your controller, set this flag to true when you want the loading div to show, and to false when you want it to hide:

    $scope.loadSomething = function() {
    $scope.shouldLoadingDivBeDisplayed = true;
    $http.get('/foo')
         .success(function() {
               $scope.shouldLoadingDivBeDisplayed = false;
               ...
         });
};
JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • But I want to use 'add/remove' instead of 'show/hide'. Is it possible? – Zach Aug 01 '13 at 09:54
  • Don't think it's possible witout using a directive in he current version of angular. I think I remember having seen that possibility in the development branch (1.1.x) – JB Nizet Aug 01 '13 at 10:31