CODEWITHSUNDEEP
javascriptangularjs
Serhiy
Serhiy

Reputation: 1981

How to get height of element in angularjs

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

Answers (3)

Theo Itzaris
Theo Itzaris

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>

Into js, you create the directive that gets the height:

.directive('myDirective', function () {
    return {
        restrict: 'AE',
        link: function (scope, element, attrs) {
            var elementHeight = element.height();
            console.log(elementHeight);
        }
    }
})

Upvotes: 3

illeb
illeb

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.

Edit 1

OP used this mid way after my suggestion:

var element = angular.element(document.querySelector('#id')); 
var height = element[0].offsetHeight;

Upvotes: 14

Adam Nagy
Adam Nagy

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

Related Questions