How to get height of element in angularjs

Question

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?

you can use 'dir-paginate' an angular js pagination plugin.. based on your count it will display fixed number of records. after that pagination will come... — Anil Kumar Ram
– Anil Kumar Ram, Commented Oct 6, 2016 at 8:56
But why ? Is there a significant reason to not use ng-repeat ? — Weedoze
– Weedoze, Commented Oct 6, 2016 at 9:05
dir paginate is extended form of ng-repeat with pagination.. — Anil Kumar Ram
– Anil Kumar Ram, Commented Oct 6, 2016 at 9:21

illeb · Accepted Answer · 2016-10-06 10:11:32Z

14

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;

edited Oct 6, 2016 at 10:11

answered Oct 6, 2016 at 9:03

illeb

2,9471 gold badge23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Serhiy Over a year ago

when I use : var x = angular.element('#'+id+'container'); console.log(x); I receive: j…y.fn.init {context: document, selector: "#165container"}. Cannot height height from there

illeb Over a year ago

Try with the standard javascript way: var element = angular.element(document.querySelector('.ass')); and then element[0].offsetHeight

Lokesh Pandey Over a year ago

@Luxor001 will this give us the height of div in ng-repeat also ? If the limit is set to 2 ?

Theo Itzaris · Accepted Answer · 2016-10-06 10:13:33Z

3

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);
        }
    }
})

answered Oct 6, 2016 at 10:13

Theo Itzaris

4,7067 gold badges44 silver badges77 bronze badges

1 Comment

Rafael Herscovici Over a year ago

This would only work if JQuery is available BEFORE angular is loaded. Otherwise, only JQLite is available, which does not have this function.

Adam Nagy · Accepted Answer · 2016-10-06 09:34:22Z

1

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
            }
        });

edited Oct 6, 2016 at 9:34

answered Oct 6, 2016 at 9:15

Adam Nagy

7711 bronze badges

Collectives™ on Stack Overflow

How to get height of element in angularjs

3 Answers 3

Edit 1

3 Comments

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

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edit 1

3 Comments

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

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related