Question

我是棱角分明的新人。我正在使用angular1.4和bootstrap。问题：我的跨度宽度增大或缩小，具体取决于绑定的文本内容。

<div myStyleDir>
   <span>{{someContent}}</span>
</div>

在范围内：

$scope.someContent = "abcdefgh";

根据DOM中此跨度的宽度，我必须继续进行其他一些我想要使用指令myStyleDir进行的计算。在指令的link函数中，jQuery-lite＆＃39;元素＆＃39;参数宽度来自＆＃39; 0＆＃39;。

当＆＃39;链接＆＃39;功能正在执行？如何获取链接函数中<span>{{someContent}}</span>元素的宽度？如果这不是一个可行的方法，请建议一个替代方案。提前谢谢！

Answer 1

我假设你正在使用Angular 1.x，所以这应该适合你：

HTML：

<my-style-directive>{{test}}</my-style-directive>

指令JS：

.directive("myStyleDirective", ['$timeout', function($timeout) {
  return {
    restrict: 'E',
    scope: true,
    link: function(scope, elem, attrs) {
      var getWidth = function() {
        $timeout(function() {
          console.log(elem[0].getBoundingClientRect().width);
        });
      };

      getWidth();

      scope.$watch('test', function (newval, oldval) {
        if (newval !== oldval) {
          getWidth();
        }
      });
    }
  };
}]);

Plnkr显示：http://plnkr.co/edit/eVxDZTmjY22yG1aOScwC

基本上它正在做的是在你想要获得宽度的任何内容周围放置一个包装器。将它作为div的一个属性意味着宽度将被读取为父的宽度，例如你有一个div在最顶层，div的宽度将是身体的宽度。如果没有这种方法，获得宽度的唯一方法是进行一些不稳定的计算，它将与你的CSS相结合。

$ timeout是为了确保DOM完成渲染以获得准确的读数。本质上，当JS事件循环为空时，即在所有内容都已初始化并呈现所有内容之后，$ timeout执行的操作。要了解有关超时如何工作的更多信息，请参阅此处：https://www.youtube.com/watch?v=8aGhZQkoFbQ#t=10m44s

Answer 2

你可以使用这样的指令：

.directive('YourDirectiveName', function() {
    return {
        restrict: 'EA',
        scope: {data:'='},
        link: function(scope, iElement, iAttrs) {
           var elementRect = iElement[0].getBoundingClientRect();
             var width = elementRect.width;
             var height = elementRect.height;
             .......
        }
    }
});

注意：在使用angular指令开发任何内容时，您应该在任何地方记录内容。这样它将有助于您的开发。

我在使用角度为我的网络应用和移动应用开发图表（SVG）时使用了这个。

计算元素的宽度 - 角度指令

2 个答案: