Angular directive bind to height of element

Question

I am fairly new to Angular and want to be able to bind to the height of an element. In my current case I want to bind the CSS bottom on el1 to the height of el2. They do not share a common controller. How can I do this?

<div id='el1' ng-controller='controller1' style='bottom: {{theHeightOfEl2}}'></div>
<div id='el2' ng-controller='controller2' style='height: 573px;'></div>

I found an answer on here which looked promising but couldnt see how to extend it to allow me to specify which element I wanted to bind it to.

In a generic case, I guess what I am asking for is a directive to bind property X on Element 1 to property Y on Element 2.

Update

I have created a directive to do this but it isn't quite working yet. It fires correctly at the start but when I try to test it by manually updating the CSS of the el2 the watch doesnt fire

m.directive('bindToHeight', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            var attributes = scope.$eval(attrs['bindToHeight']);
            var targetElem = angular.element(document.querySelector(attributes[1]));

            // Watch for changes
            scope.$watch(function () {
                return targetElem.height();
            },
            function (newValue, oldValue) {
                if (newValue != oldValue) {
                    // Do something ...
                    console.log('Setting bottom to ' + newValue);
                    elem.attr('bottom', newValue);
                }
            });
        }
    };
});

There is also a possibility that this can be done with just CSS. — dfsq, Dec 16 '14 at 11:18
Ooh how? Both elements are absolutely positioned and the second's height can vary. There is no reason, aside from requiring to set bottom, for the first element being absolute — Chris, Dec 16 '14 at 11:22
I would better go with directive that would listen height change. — dfsq, Dec 16 '14 at 11:25
`elem.attr('bottom', newValue)` sets the value to **attribute** `bottom`, if you want to change style, use `elem.css`. — hon2a, Dec 16 '14 at 11:49

score 3 · Accepted Answer · answered Dec 16 '14 at 11:52

To anyone looking for the answer, here is what I used

Usage bind-to-height="[cssProperty, sourceElement]":

<div bind-to-height="['bottom','#addressBookQuickLinks']">

Code:

m.directive('bindToHeight', function ($window) {

    return {
        restrict: 'A',

        link: function (scope, elem, attrs) {
            var attributes = scope.$eval(attrs['bindToHeight']);
            var targetElem = angular.element(document.querySelector(attributes[1]));

            // Watch for changes
            scope.$watch(function () {
                return targetElem.height();
            },
            function (newValue, oldValue) {
                if (newValue != oldValue) {
                    elem.css(attributes[0], newValue);
                }
            });
        }
    };
});

score 0 · Answer 2 · answered Dec 16 '14 at 11:17

you can wrap you controllers in additional top level controller for example

<div ng-controller="PageController">
 <div id='el1' ng-controller='controller1' style='bottom: {{theHeightOfEl2}}'></div>
 <div id='el2' ng-controller='controller2' style='height: 573px;'></div>
</div>

and calculate and store the height of element in that controller

another way to create directive and apply on one of them, which will find the element from DOM and will apply the height on that

score 0 · Answer 3 · answered Feb 09 '16 at 11:27

You can easily do it with this simple directive. Basically it only watches for that attribute value to change.

app.directive('bindHeight', function ($window) {
  return {
    link:  function(scope, element, attrs){
      scope.$watch(attrs.bindHeight, function(value) {
        console.log(value);
        element.css('height',value + 'px');
      });
    }
  };
});


//$scope.myHeight
<div id="main-canvas" bind-height="myHeight">

score 0 · Answer 4 · answered Sep 02 '16 at 15:10

I'm using a modified version of what you did. I added an offset attribute and a timeout for letting ui rendering events to complete:

m.directive('bindToHeight', function ($window) {
    return {
        restrict: 'A',
        link: function(scope, iElement, iAttrs) {
            var attributes = scope.$eval(iAttrs.bindToHeight);
            var targetElem = angular.element(document.querySelector(attributes[1]));
            var offset = attributes[2]? parseInt(attributes[2]) : 0;
            var timeoutId;
            // Watch for changes
            scope.$watch(function () {
                timeoutId && $timeout.cancel(timeoutId);
                timeoutId = $timeout(function () {
                  var total = targetElem.height() + offset;
                  //remove the px/em etc. from the end before comparing..
                  if (parseInt(iElement.css(attributes[0]).slice(0, -2)) !== total)
                  {
                    iElement.css(attributes[0], total);
                  }
                }, 50, false);
            });
        }
    };
});

Angular directive bind to height of element

4 Answers4

Linked