I want to make a directive with shows a spinner when $http request is executing.
I thought this would be working (e.g. load users):
Main Controller
app.controller('UserListController', function($scope, $http) {
$scope.users = [];
$scope.loading = true;
$http.get('/users').then(function(response) {
$scope.users = response.data;
}).finally(function() { $scope.loading = false; });
});
Template using the directive
<div request-loading="loading">
<ul>
<li ng-repeat="user in users">{{ user.name }}</li>
</ul>
</div>
request-loading-directive.js
app.directive('requestLoading', function() {
return {
scope: {
requestLoading: '='
},
transclude: true, // I think this is not Ok
templateUrl: 'request-loading-directive.html'
};
});
request-loading-template.html
<div ng-show="requestLoading" class="super-cool-spinner">
Loading text with the spinner...
</div>
// This is what is not working
// I thought the content of the users (ul and li) would be render in this div
// when the request is Ok.
<div ng-transclude ng-show="! requestLoading"></div>
Any help would be nice! Thx.
