Question

我想同步DOM元素的宽度，使宽度始终是可容纳内容的最小宽度。我可以成功增加尺寸$观看增加（基于ref1＆amp; ref2），但我无法弄清楚如何缩小元素之后放大。

Angular指令：

app.directive('syncWidth', function () { //declaration; identifier master
  return {
    restrict: 'A',
    link: function (scope, element) {
      var linkElement = element[0];

      scope.$watch(
        function () {
          return (linkElement.scrollWidth);
        },
        function (newValue, oldValue) {
          if (newValue > oldValue) {
            scope.testWidth = {
              'min-width': newValue + 'px'
            }
          }
        },
        true
      );
    }
  };
});

HTML：

<input type="text" ng-model="myText">
<input type="text" ng-model="myText2">

<div sync-width="test" style="background-color: lightblue" ng-style="testWidth">1 [{{myText}}]</div>
<div sync-width="test" style="background-color: lightcoral" ng-style="testWidth">2 [{{myText2}}]</div>

我假设问题是这两个元素引用了另一个元素。我认为伪代码看起来像是：

Set a global groupMinWidth variable
Detect element.contentWidth changed
If newContentWidth > groupMinWidth {
  groupMinWidth = newContentWidth;
}

If oldContentWidth == groupMinWidth {
  check all synchronized elements and set groupMinWidth to the largest contentWidth;
}

感谢您的帮助。

Answer 1

我现在正在使用plunkr但尚未完全正常工作：https://plnkr.co/edit/6XfGMzI1su8cpHjkyDWC?p=preview。关键在于观察文本的变化，当文本减少时，使用共享值/全局值来记录并检查哪个宽度最宽，将min-width设置为该值为这两个要素。

=== EDIT ===

最后完成这项工作：https://plnkr.co/edit/c2FOu5LfPfGfnkU12KTG?p=preview

所以这背后的原理是：当内容发生变化时，我需要一个可变的div来衡量scrollWidth/offsetWidth。所以我添加了一个包含内容的新嵌套div。我将内部div设为float，一旦内容发生变化，我将通过将外部div width设置为内部div的宽度来更新外部div的宽度。关键点是因为内部div是FLOAT，它可以溢出外部div的右边界，但out div正在观察内容的变化，因此外部div的宽度将立即更新。

如何在AngularJS中同步DOM元素宽度？

1 个答案: