I've got a seemingly simple problem with no apparent (by reading the Angular JS docs) solution.
I have got an Angular JS directive that does some calculations based on other DOM elements' height to define the height of a container in the DOM.
Something similar to this is going on inside the directive:
return function(scope, element, attrs) {
$('.main').height( $('.site-header').height() - $('.site-footer').height() );
}
The issue is that when the directive runs, $('site-header')
cannot be found, returning an empty array instead of the jQuery wrapped DOM element I need.
Is there a callback that I can use within my directive that only runs after the DOM has been loaded and I can access other DOM elements via the normal jQuery selector style queries?
Any help would be much appreciated.
It depends on how your $('site-header') is constructed.
You can try to use $timeout with 0 delay. Something like:
return function(scope, element, attrs) {
$timeout(function(){
$('.main').height( $('.site-header').height() - $('.site-footer').height() );
});
}
Explanations how it works: one, two.
Don't forget to inject $timeout
in your directive:
.directive('sticky', function($timeout)
Probably the author won't need my answer anymore. Still, for sake of completeness i feel other users might find it useful. The best and most simple solution is to use $(window).load()
inside the body of the returned function. (alternatively you can use document.ready
. It really depends if you need all the images or not).
Using $timeout
in my humble opinion is a very weak option and may fail in some cases.
Here is the complete code i'd use:
.directive('directiveExample', function(){
return {
restrict: 'A',
link: function($scope, $elem, attrs){
$(window).load(function() {
//...JS here...
});
}
}
});
Here is how I do it:
app.directive('example', function() {
return function(scope, element, attrs) {
angular.element(document).ready(function() {
//MANIPULATE THE DOM
});
};
});
there is a ngcontentloaded
event, I think you can use it
.directive('directiveExample', function(){
return {
restrict: 'A',
link: function(scope, elem, attrs){
$$window = $ $window
init = function(){
contentHeight = elem.outerHeight()
//do the things
}
$$window.on('ngcontentloaded',init)
}
}
});
If you can't use $timeout due to external resources and cant use a directive due to a specific issue with timing, use broadcast.
Add $scope.$broadcast("variable_name_here");
after the desired external resource or long running controller/directive has completed.
Then add the below after your external resource has loaded.
$scope.$on("variable_name_here", function(){
// DOM manipulation here
jQuery('selector').height();
}
For example in the promise of a deferred HTTP request.
MyHttpService.then(function(data){
$scope.MyHttpReturnedImage = data.image;
$scope.$broadcast("imageLoaded");
});
$scope.$on("imageLoaded", function(){
jQuery('img').height(80).width(80);
}