ディレクティブテンプレートの$ document.ready（）？

Question

私は自分自身のサイズを変更していないと思われるテンプレートを返すディレクティブを持っています。テンプレート内の要素の高さは100％に設定されていますが、親の高さ（ディレクティブの外側）は十分速く設定されていないようです（0〜100％も）。

ページを更新しても問題はありませんが、これはウィンドウのサイズを変更するときにのみ発生します。

例：http://codepen.io/sweatherly/pen/rLYPvE（その後、確認するためにリフレッシュし、ウィンドウのサイズを小さく）

ディレクティブを使用していない例を注意してください、単に問題を強調しています。

(function() { 
"use strict"; 
angular 
    .module("ngApp") 
    .directive("currentCard", function() { 
     return { 
      templateUrl: 'components/orders/current/current-card.tpl.html', 
      scope: { 
       orders:  "=", 
       cardTitle: "@cardTitle" 
      } 
     } 
    }); 
})(); 

どういうわけか$document.ready()をテンプレートに使用できますか？ 編集：これは愚かなCSSの問題（間違った要素を対象とする）であることが判明しましたが、私はディレクティブのリンク機能について少しは理解しています。

Answer 1

linkテンプレートを読み込んだ後に実行される関数を使用できます。

通常、すべてのDOM操作、イベントハンドラの追加/削除はリンク機能で行う必要があります。

difference between compile and link functionを参照してください。

Answer 2

あなたは単にリンク機能を使用することができます...

リンクは、ディレクティブがロードまたは親テンプレートに表示されている場合、この関数が実行され、ディレクティブのための機能に組み込まれています。例here

(function() { 
"use strict"; 
angular 
    .module("ngApp") 
    .directive("currentCard", function() { 
     return { 
      templateUrl: 'components/orders/current/current-card.tpl.html', 
      scope: { 
       orders:  "=", 
       cardTitle: "@cardTitle" 
      }, 
      link: function(){ 
       console.log("ready") 
      } 
     } 
    }); 
})();