Get element parent height inside directive in AnguarJS

Question

How do you get and set the parent height from an element from inside a directive?

This is what I have now, obviously it's not working.

var vAlign = angular.module("vAlign", [])
.directive('vAlign', function() {
  return {
        restrict : "AC",
        link: function(scope, e){

            e.parent.height(1200);
            console.log(e.parent.height);
        }
    };
});

Answer 1

You can use parent and height methods of jqLite/jQuery:

link: function(scope, e) {
    e.parent().height(1200);
    console.log(e.parent().height());
}

Or you could do it in pure javascript with parentNode property, which is a reference to parent element:

link: function(scope, e) {
    e[0].parentNode.style.height = 1200 + 'px';
}

Also note, that since e is an jqLite/jQuery instance here which is a array-like collection of one single element, you need to use [0] to access raw HTMLElement.

Answer 2

e.parent is a function, so you must call it as such:

e.parent().height(1200);

Further, if you do not load jquery on the page, you will have to use

.css('height', '1200px')

instead, as jqLite does not include .height