計算元素的寬度 - 角度指令

我是角度新手。我正在使用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對象在這裏沒用，但你可以看到我沒有使用它。這是爲了方便。我會編輯我的答案。 –

計算元素的寬度 - 角度指令

回答

相關問題