domのレンダリングが終了した後でディレクティブを実行するにはどうすればよいですか？

（Angular JSのドキュメントを読むことで）明らかな解決策がない一見単純な問題があります。

DOM内のコンテナーの高さを定義するために、他のDOM要素の高さに基づいていくつかの計算を行うAngular JSディレクティブがあります。

これと同様のことがディレクティブ内で行われています。

return function(scope, element, attrs) {
    $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
}

問題は、ディレクティブが実行さ$('site-header')れると見つからず、必要なjQueryでラップされたDOM要素の代わりに空の配列を返すことです。

DOMが読み込まれた後にのみ実行され、通常のjQueryセレクタースタイルのクエリを介して他のDOM要素にアクセスできるディレクティブ内で使用できるコールバックはありますか？

$（ 'site-header'）の構成方法によって異なります。

$ timeoutを遅延なしで使用することができます。何かのようなもの：

return function(scope, element, attrs) {
    $timeout(function(){
        $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
    });        
}

仕組みの説明：1つ、2つ。

$timeoutディレクティブに注入することを忘れないでください：

.directive('sticky', function($timeout)

ここに私がそれをする方法があります：

app.directive('example', function() {

    return function(scope, element, attrs) {
        angular.element(document).ready(function() {
                //MANIPULATE THE DOM
        });
    };

});

おそらく著者はもう私の答えを必要としません。それでも、完全を期すために、他のユーザーが役立つと思うかもしれません。最良かつ最も簡単な解決策は$(window).load()、返された関数の本体内で使用することです。（または、使用できますdocument.ready。すべての画像が必要かどうかは実際に異なります）。

使用する $timeout私の謙虚な意見でのは非常に弱いオプションであり、場合によっては失敗することがあります。

これが私が使用する完全なコードです：

.directive('directiveExample', function(){
   return {
       restrict: 'A',
       link: function($scope, $elem, attrs){

           $(window).load(function() {
               //...JS here...
           });
       }
   }
});

ngcontentloadedイベントがあり、利用できると思います

.directive('directiveExample', function(){
   return {
       restrict: 'A',
       link: function(scope, elem, attrs){

                $$window = $ $window


                init = function(){
                    contentHeight = elem.outerHeight()
                    //do the things
                }

                $$window.on('ngcontentloaded',init)

       }
   }
});

外部リソースのために$ timeoutを使用できず、タイミングに関する特定の問題のためにディレクティブを使用できない場合は、ブロードキャストを使用します。

$scope.$broadcast("variable_name_here");必要な外部リソースまたは長期実行コントローラー/ディレクティブが完了した後に追加します。

次に、外部リソースが読み込まれた後に以下を追加します。

$scope.$on("variable_name_here", function(){ 
   // DOM manipulation here
   jQuery('selector').height(); 
}

たとえば、遅延されたHTTPリクエストの約束で。

MyHttpService.then(function(data){
   $scope.MyHttpReturnedImage = data.image;
   $scope.$broadcast("imageLoaded");
});

$scope.$on("imageLoaded", function(){ 
   jQuery('img').height(80).width(80); 
}

同様の問題があり、私の解決策をここで共有したいと思います。

次のHTMLがあります。

<div data-my-directive>
  <div id='sub' ng-include='includedFile.htm'></div>
</div>

問題：親divのディレクティブのリンク関数で、子div＃subにjqueryを実行する必要がありました。しかし、ディレクティブのリンク関数が実行されたときにng-includeが終了していなかったため、空のオブジェクトが表示されました。したがって、最初に$ timeoutを使用してダーティーな回避策を作成しましたが、これは機能しましたが、遅延パラメーターはクライアントの速度に依存していました（誰もそれが好きではありません）。

動作しますが汚れています：

app.directive('myDirective', [function () {
    var directive = {};
    directive.link = function (scope, element, attrs) {
        $timeout(function() {
            //very dirty cause of client-depending varying delay time 
            $('#sub').css(/*whatever*/);
        }, 350);
    };
    return directive;
}]);

これがクリーンなソリューションです：

app.directive('myDirective', [function () {
    var directive = {};
    directive.link = function (scope, element, attrs) {
        scope.$on('$includeContentLoaded', function() {
            //just happens in the moment when ng-included finished
            $('#sub').css(/*whatever*/);
        };
    };
    return directive;
}]);

多分それは誰かを助ける。