I have an image loading within a div container and I need to know the offsetwidth & offsetheight after the image is loaded to add certain CSS classes.
I have added a timeout and even added this code within a $loaded callback (which comes from firebase) and the div always returns 0. It even returns 0 even if I add inline css. This shouldn’t be correct should it. Can someone let me know what I am doing wrong.
HTML
<div class="image-holder-new" id="image-holder-new">
<img ng-src="{{imgPostUrl}}" id="image-height" alt="">
<div class="tags {{item.style}}" ng-repeat="(description, item) in tags"
style="top: {{(containerHeight * item.positionY) / orgContainerHeight}}px;left: {{(containerWidth * item.positionX) / orgContainerWidth}}px;">
<div class="tag-brand fadeBrandTag" ng-if="tagShow">
{{::item.itemDescription.join(', ')}}
</div>
<div class="tag-pin fade" ng-if="tagShow"></div>
</div>
</div>
Controller
var picture = $firebaseArray(ref);
picture.$loaded().then(function (picture) {
$scope.post = picture.$getRecord(id);
$scope.imgPostUrl = 'data:image/jpeg;base64,' + $scope.post.image;
$scope.imageHasLoaded = true;
$scope.tags = $scope.post.tags;
$scope.user = User.getUserData($scope.post.user);
ShareData.saveImageTitle($scope.post.itemTitle);
$scope.navTitle = ShareData.retrieveImageData().imageTitle;
if($scope.imageHasLoaded){
$scope.containerWidth = document.getElementById('image-holder-new').offsetWidth;
$scope.containerHeight = document.getElementById('image-holder-new').offsetHeight;
$scope.orgContainerWidth = $scope.post.origWidth;
$scope.orgContainerHeight = $scope.post.origHeight;
console.log('image holder width' + ' ' + $scope.containerWidth);
console.log('image holder height' + ' ' + $scope.containerHeight);
console.log('original holder width' + ' ' + $scope.orgContainerWidth);
console.log('original holder height' + ' ' + $scope.orgContainerHeight);
}
}).catch(function (error) {
console.log('Error:', error);
});