要素の幅を計算する - 角度指令

Question

角度が新しいです。 私はangular1.4とブートストラップを使用しています。 問題：バインドされているテキストの内容に応じて、幅が拡大または縮小するスパンがあります。スコープで

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

：DOMでこのスパンの幅に基づいて

$scope.someContent = "abcdefgh"; 

、私はディレクティブmyStyleDirを使用してやりたいいくつかの他の計算を続行する必要があります。 ディレクティブのlink関数で、jQuery-Liteの 'element'パラメータの幅が '0'になっています。

'リンク'機能の実行中にスパンがレンダリングされていませんか？ <span>{{someContent}}</span>要素の幅をリンク機能内で取得するにはどうすればよいですか？これが実現可能な方法でない場合は、代替案を提案してください。前もって感謝します ！

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

注：

Answer 1

私はあなたが角度の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がレンダリングを終了させることです。本質的に$ timeoutは、JSイベントループが空の場合、つまりすべてが初期化され、すべてがレンダリングされた後に実行されます。 JSでのタイムアウトの動作の詳細については、こちらを参照してください。https://www.youtube.com/watch?v=8aGhZQkoFbQ#t=10m44s

Answer 2

あなたはこのようにディレクティブを使用することができ、角度ディレクティブを使用して何かを開発している間、あなたが好きな場所あなたは、コンテンツを記録する必要があります。それがあなたの発展のために大いに役立つように。

私はこれをWebアプリケーションとモバイルアプリケーションのための角度を使ってグラフ（SVG）を開発する際に使用しました。