最初にいくつかのコンテキスト。私は、テキストの幅に基づいて要素の絶対的な配置に依存するコンポーネントを持っています。これを達成するために、文字列とそれを含む要素を指定してテキスト幅を計算するサービスを作成しました。私は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が実行されてもスタイルはまだ適用されません。
質問です。コードが実行される前にスタイルがテンプレートに適用されるように$タイムアウトハックを適用する方法がありますか?