$ document.ready() auf Direktivenvorlage?

Question

Ich habe eine Direktive, die eine Vorlage zurückgibt, die nicht so aussieht, wie sie sollte. Die Höhe der Elemente in der Vorlage ist auf 100% festgelegt, es scheint jedoch, dass die Höhe des übergeordneten Elements (außerhalb der Direktive) nicht schnell genug festgelegt wird (auch von 0 bis 100%).

Ich habe kein Problem, wenn ich die Seite aktualisieren, dies kommt nur beim Ändern der Größe des Fensters.

Beispiel:http://codepen.io/sweatherly/pen/rLYPvE (die Fenstergröße verringern, dann aktualisieren, um zu sehen)

Bitte beachten Sie die das Beispiel keine Richtlinie nicht verwendet, unterstreicht nur das Problem.

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

Ist es möglich, irgendwie $document.ready() zu verwenden, auf/mit der Vorlage? Edit: Es stellte sich heraus, ein dummes CSS-Problem (Targeting falsches Element), aber ich weiß ein wenig über die Link-Funktion der Direktive zu verstehen.

Answer 1

Sie können die Funktion link verwenden, die nach dem Laden der Vorlage ausgeführt wird.

Normalerweise alle DOM-Manipulation, Hinzufügen/Entfernen von Ereignishandlern sollte in Link-Funktion erfolgen.

Bitte beziehen Sie sich auf difference between compile and link function.

Answer 2

Sie können einfach die Link-Funktion verwenden ...

Link- ist ein für die Richtlinie in Funktion gebaut, diese Funktion ausgeführt wird, wenn die Richtlinie in der übergeordneten Vorlage geladen wird oder erscheint.

Referenz here; here Beispiel

(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") 
      } 
     } 
    }); 
})();