Chris Chris - 3 months ago 14
AngularJS Question

Angular directive bind to height of element

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

Answer

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