2016-10-28 2 views
0

最初にいくつかのコンテキスト。私は、テキストの幅に基づいて要素の絶対的な配置に依存するコンポーネントを持っています。これを達成するために、文字列とそれを含む要素を指定してテキスト幅を計算するサービスを作成しました。私はjQueryの.css()関数を使用して、テキスト幅を取得するためにキャンバスAPIで使用できるフォント文字列を作成します。

function getTextWidth(text, referenceElement) { 

    var canvas = document.createElement("canvas"); 
    var context = canvas.getContext("2d"); 

    var fontCss = ''; 
    fontCss += ' ' + referenceElement.css('font-style'); 
    fontCss += ' ' + referenceElement.css('font-variant'); 
    fontCss += ' ' + referenceElement.css('font-weight'); 
    fontCss += ' ' + referenceElement.css('font-size'); 
    fontCss += '/' + referenceElement.css('line-height'); 
    fontCss += ' ' + referenceElement.css('font-family'); 

    context.font = fontCss; 
    return context.measureText(text).width; 

} 

問題です。これはdevでうまくいっていましたが、QAで失敗しました。 .css()メソッドはすべてに対してundefinedを返していました。私の調査は、ビルドプロセスでjavascriptにテンプレートをコンパイルするという事実につながった。明らかに、Angularコンポーネントが$ http-loadedテンプレートを使用している場合、ページスタイルはすぐに適用され、$ onInitが実行されると利用可能になります。しかし、テンプレートがプリロードされると、$ onInitが実行されてもスタイルはまだ適用されません。

質問です。コードが実行される前にスタイルがテンプレートに適用されるように$タイムアウトハックを適用する方法がありますか?

答えて

0

通常、$ onInitのgetTextWidth(yourText, yourElement)の代わりに$timeout(getTextWidth(yourText, yourElement))を追加するだけで、CSSに質問する前に要素が適切にレンダリングされていることを確認するだけで十分です。

関連する問題