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

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

• javascript
• css
• angularjs

Share Improve this question Follow edited May 23, 2017 at 11:53 CommunityBot 111 silver badge asked Dec 16, 2014 at 11:10 ChrisChris 27.4k4949 gold badges206206 silver badges357357 bronze badges 4

• There is also a possibility that this can be done with just CSS. – dfsq Commented Dec 16, 2014 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 Commented Dec 16, 2014 at 11:22
• I would better go with directive that would listen height change. – dfsq Commented Dec 16, 2014 at 11:25
• 1 elem.attr('bottom', newValue) sets the value to attribute bottom, if you want to change style, use elem.css. – hon2a Commented Dec 16, 2014 at 11:49

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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

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">

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

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 paring..
                  if (parseInt(iElement.css(attributes[0]).slice(0, -2)) !== total)
                  {
                    iElement.css(attributes[0], total);
                  }
                }, 50, false);
            });
        }
    };
});