Question

我对Angular很新，并希望能够绑定到元素的高度。在我目前的情况下，我想将bottom上的CSS el1绑定到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);
                }
            });
        }
    };
});

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

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

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

Answer 4

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

Angular指令绑定到元素的高度

4 个答案: