角度指令绑定到元素的高度

Angular directive bind to height of element

本文关键字：元素 高度 绑定 指令      更新时间：2023-09-26

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

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

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

在一般情况下，我想我要求的是一个指令，将元素 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);
                }
            });
        }
    };
});

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

用法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);
                }
            });
        }
    };
});
例如，

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

<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 中找到元素并将高度应用于该元素

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

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

我正在使用您所做的修改版本。我添加了一个偏移属性和一个超时，让 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);
            });
        }
    };
});
相关文章：