Angular 指令绑定到元素的高度答案

【问题标题】：Angular directive bind to height of elementAngular 指令绑定到元素的高度
【发布时间】：2014-12-16 11:10:55
【问题描述】：

我对 Angular 还很陌生，希望能够绑定到元素的高度。在我目前的情况下，我想将 el1 上的 CSS bottom 绑定到 el2 的高度。它们不共享一个公共控制器。我该怎么做？

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

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

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

更新

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

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

【问题讨论】：

这也有可能只用 CSS 来完成。
哦，怎么样？两个元素都是绝对定位的，第二个元素的高度可以变化。除了要求设置底部之外，没有任何理由让第一个元素是绝对的
我最好使用能够监听高度变化的指令。
elem.attr('bottom', newValue) 将值设置为属性 bottom，如果要更改样式，请使用elem.css。

标签： javascript css angularjs

【解决方案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);
                }
            });
        }
    };
});

【讨论】：

【解决方案2】：

例如，您可以将控制器包装在额外的顶级控制器中

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

并计算并存储该控制器中元素的高度

另一种创建指令并应用于其中一个指令的方法，它将从 DOM 中找到元素并将高度应用于该元素

【讨论】：

【解决方案3】：

您可以使用这个简单的指令轻松完成。基本上它只监视该属性值的变化。

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

【讨论】：

【解决方案4】：

我正在使用你所做的修改版本。我添加了一个偏移属性和一个超时来让 ui 渲染事件完成：

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

【讨论】：