javascript - Angular Directive(指令)绑定(bind)到元素的高度

Question

我是 Angular 的新手，希望能够绑定(bind)到元素的高度。在我当前的情况下，我想将 el1 上的 CSS bottom 绑定(bind)到 el2 的高度。他们不共享一个公共(public) Controller 。我该怎么做？

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

我在 here 上找到了答案这看起来很有希望，但看不到如何扩展它以允许我指定我想将它绑定(bind)到哪个元素。

在一般情况下，我想我要求的是将元素 1 上的属性 X 绑定(bind)到元素 2 上的属性 Y 的指令。

更新

我已经创建了一个指令来执行此操作，但它还没有完全起作用。它在开始时正确触发，但是当我尝试通过手动更新 el2 的 CSS 来测试它时， watch 没有触发

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 1

对于任何寻找答案的人，这是我用过的

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

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

代码:

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