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

我是角度新手。我正在使用angular1.4和bootstrap。问题：我有一个跨度，其宽度根据绑定的文本内容而增大或缩小。计算元素的宽度 - 角度指令

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

在范围：

$scope.someContent = "abcdefgh";

在此基础上跨度在DOM的宽度，我有，我想用一个指令myStyleDir做一些其他的计算进行。在指令的链接函数中，jQuery-lite的“元素”参数宽度为'0'。

“链接”功能执行时，跨度还没有呈现？我如何获得链接函数中<span>{{someContent}}</span>元素的宽度？如果这不是一个可行的方法，请提出一个替代方案。提前致谢！

来源

2016-09-08 user3427320

您可以将someContent模型传递给指令，然后观察它是否发生任何更改，然后重新计算宽度 –

我假设你正在使用角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

基本上这是做什么是围绕什么co包装你想获得宽度的内容。把它作为一个div的属性意味着宽度将被读取为尽可能宽的父母，例如，你在最顶层有一个div，div的宽度将是主体的宽度。如果没有这种方法，获取宽度的唯一方法是做一些不可思议的计算，并将它与您的CSS耦合。

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

来源

2016-09-08 05:20:42 ryanlutgen

这个答案很好。但是如果'myStyleDirective'的内容被改变了，那么link函数就不会调用，'myStyleDirective'指令不知道怎么改变* width *。 –

如果'myStyleDirective'中的内容是纯粹的范围变量，或者您的范围值可能会因此而改变，那么您可以将范围传递给指令并让手表重新检查宽度。我已经更新了我的答案以反映这一点。 – ryanlutgen

您可以使用指令如下：

.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为我的web应用程序和移动应用程序开发图形（SVG）时使用了此功能。

来源

2016-09-08 05:06:03

为什么要在这里注入$ window？你为什么引用一堆范围属性？ graphRect从哪里来，我假设你的意思是elementRect？ – ryanlutgen

你是对的$ window对象在这里没用，但你可以看到我没有使用它。这是为了方便。我会编辑我的答案。 –

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

回答

相关问题