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
– 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
– Chris, Commented Dec 16, 2014 at 11:22
I would better go with directive that would listen height change. — dfsq
– dfsq, Commented Dec 16, 2014 at 11:25
elem.attr('bottom', newValue) sets the value to attribute bottom, if you want to change style, use elem.css. — hon2a
– hon2a, Commented Dec 16, 2014 at 11:49

Chris · Accepted Answer · 2014-12-16 11:52:28Z

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

answered Dec 16, 2014 at 11:52

Chris

27.5k49 gold badges208 silver badges358 bronze badges

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

Comments

Narek Mamikonyan · Accepted Answer · 2014-12-16 11:17:30Z

0

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

answered Dec 16, 2014 at 11:17

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

Comments

keithics · Accepted Answer · 2016-02-09 11:27:27Z

0

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

answered Feb 9, 2016 at 11:27

keithics

8,7782 gold badges52 silver badges35 bronze badges

Comments

user4463463 · Accepted Answer · 2016-09-02 15:10:14Z

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

Collectives™ on Stack Overflow

Angular directive bind to height of element

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related