I have a straightforward directive that renders an element, and this is the template:
<div class="nav-item"></div>
The .nav-item class looks like this:
.nav-item {
height: 50;
}
Here's the directive in action:
angular.module('myapp')
.directive('navItem', ['info',
function(info) {
return {
scope: {
position: '@'
},
link: function(scope, element) {
function _addData() {
var rect = element.get(0).getBoundingClientRect();
info.addData(scope.position, rect);
}
_addData();
},
templateUrl: 'tmpl.html'
};
}]
);
Everything works fine when the link function calls the _addData method, and the correct attributes are registered in a custom factory. However, the issue arises when I change the class attribute in the template to ngClass. If I use this syntax in tmpl:
<div data-ng-class="{'nav-item': true}"></div>
When _addData calls getBoundingClientRect, it erroneously returns a height of 1 instead of 50. It appears that the ngClass is not applied to the element when the link function processes it. How can I ensure that the correct element position is retrieved? I even tried including a postLink function in the directive to check the same, but it didn't solve the issue...