Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Login
Sign Up
Ask Question
2
Reply
AngularJS Showing Busy icon when loading data
tri_inn
Jun 9 2017 8:03 AM
194
Reply
i have created a small example which would show spinner when data will be loading. create directive for this because i can reuse it. problem is spinner loading all the time which is not right.
see the code and tell me where i made the mistake ?
angular.module(
'myApp'
, [])
.directive(
'loading'
, [
'$http'
,function ($http)
{
return
{
restrict:
'A'
,
template:
'<div class="loading-spiner"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" /> </div>'
,
link: function (scope, elm, attrs)
{
scope.isLoading = function () {
return
$http.pendingRequests.length > 0;
};
scope.$watch(scope.isLoading, function (v)
{
if
(v){
elm.show();
}
else
{
elm.hide();
}
});
}
};
}])
.controller(
'myController'
, function($scope, $http) {
$scope.loadData = function() {
$scope.students = [];
$http.
get
(
'https://api.myjson.com/bins/x1rqt.json'
)
.success(function(data) {
$scope.students = data[0].students;
});
}
});
jsfiddle link https://jsfiddle.net/tridip/6L6p0bgd/
Upload Source Code
Select only zip and rar file.
Post
Reset
Cancel
Answers (
2
)
Next Recommended Forum
Regarding Date picker in Angular 2
Angular 1.x or Angular 2.0