Reputation: 1981
I have DOM
element,with id={{child.id}}container
<div id={{child.id}}container layout="column" flex layout-align="start center" class='container' dragula='"first-bag"' ng-init="vm.getAssociatedWorkItems(child.id); vm.getElementHeight(child.id+'container');">
<div layout="column" class="md-whiteframe-5dp capitalize itemsInList" ng-repeat="item in vm.items | filter:search" id={{item.id}}child>
<div class="workItemName">{{vm.getWorkItemName(item.metadata)}}</div>
<div class="workItemDescription">{{vm.getWorkItemDescription(item.metadata)}}</div>
</div>
</div>
I want to get height of this element, and according to height deside to list items in ng-repeat
or not. How to get DOMs
height in angularjs
?
Upvotes: 6
Views: 39862
Reputation: 4681
in angularjs it is advised to manipulate the DOM elements ,into directives.Into directives we also use jquery. So, you add the 'my-directive' name into the element, like so:
<div my-directive id={{child.id}}container layout="column" flex layout-align="start center" class='container' dragula='"first-bag"' ng-init="vm.getAssociatedWorkItems(child.id); vm.getElementHeight(child.id+'container');">
<div layout="column" class="md-whiteframe-5dp capitalize itemsInList" ng-repeat="item in vm.items | filter:search" id={{item.id}}child>
<div class="workItemName">{{vm.getWorkItemName(item.metadata)}}</div>
<div class="workItemDescription">{{vm.getWorkItemDescription(item.metadata)}}</div>
</div>
</div>
.directive('myDirective', function () {
return {
restrict: 'AE',
link: function (scope, element, attrs) {
var elementHeight = element.height();
console.log(elementHeight);
}
}
})
Upvotes: 3
Reputation: 2947
Use angular built-int jqlite with angular.element():
angular.element(".myDiv")[0].offsetHeight;
Beware: don't pollute your controller with DOM manipulation. It's a bad practise and you should do this kind of operations in directives.
OP used this mid way after my suggestion:
var element = angular.element(document.querySelector('#id'));
var height = element[0].offsetHeight;
Upvotes: 14
Reputation: 77
You should use angular's $element service, which is a jqLite wrapper for your component/directive. Try something similar in your controller:
controller: function($element) {
angular.foreach(
$element.find('.md-whiteframe-5dp, .capitalize, .itemsInList')
.children(), function(element){
var el = angular.element(element);
if(el.hasClass('workItemName')){
// do something with workItemName DOM element
}
if(el.hasClass('workItemDescription')){
// do something with workItemDescription DOM element
}
});
Upvotes: 1