Hear DOM complete loading directive - AngularJS
I would like to point to the loading pointer until the directive has finished loading all the children on the page.
This part of my application has tabs that will load the contents of the tab when clicked. The problem I have is that some tabs take a long time to render.
I assumed it was my HTTP request that caused a delay in rendering and resorted to using custom promises, but after implementing it I found it was a DOM rendering directive that was taking so long.
What would be the correct event to listen to in a directive if I want to display a loading progress bar before all content is displayed in that directive? $viewContentLoaded
Only used for directive as far as I know, ngView
but this directive is a sub-directive of ngView so it doesn't apply (I think).
The code is pretty simple:
Controller:
angular.module('app', [])
.controller('MyController', ['$scope', 'Service', function($scope, Service) {
$scope.get_data = function(user) {
Service.getsomething(user).then(function(response) {
$scope.data = response.data;
},
function(error) {
console.log(error);
});
};
}])
.directive('tab', function() {
return {
restrict: 'E',
templateUrl: 'templates/tab.html'
};
})
HTML:
<div role="tabpanel">
<ul class="nav nav-pills col-lg-9 col-lg-offset-3" role="tablist">
<li toggle-tabs class="active">
<a href="#apanel">Panel</a>
</li>
</ul>
<div class="tab-content col-lg-12">
<tab></tab> //within here there are many forms
</div>
</div>
source to share
angular.module('app').directive('tab', function($timeout, $rootScope) {
return {
restrict: 'E',
templateUrl: 'templates/tab.html',
link: function (scope, element, attrs, ctrl) {
$timeout(function () {
$rootScope.$emit('directive-dom-is-most-likely-there');
});
}
};
});
You cannot be sure that the DOM exists when it link
works, it depends on the implementation of the nested directives (for example ng-repeat
, it is known to be a late boomer). Or you can't be sure that none of them have asynchronous files that take some time to complete, but $timeout
with zero latency are good for cosmetic things.
It depends on the context, there is no need to pollute $rootScope
when you can talk to the parent directive with require
.
Keep in mind that it's easier to make the directive standalone with its own loading indicator instead of a global one.
source to share