AngularJSがレンダリングを完了した後にjQueryコードを実行する

Question

コントローラでは、$ httpまたは$ resourceサービスを使用してJSONデータを取得します。次に、このデータを$ scopeに書き込み、AngularJSはページのHTML構造を更新します。私の問題は、角度のng-repeatディレクティブで埋められているリスト（HTML DOM要素）の新しいサイズ（幅と高さ）が何であるかを知る必要があることです。したがって、DOM構造を更新するAngularの終了直後にjavascriptコードを実行する必要があります。それを行う正しい方法は何ですか？私は過去4時間にわたってインターネットを検索しましたが、私の問題に対する解決策は見つかりませんでした。

これは私がJSONデータを受信する方法である：

var tradesInfo = TradesInfo.get({}, function(data){ 
    console.log(data); 
    $scope.source.profile = data.profile; 
      $scope.trades = $scope.source.profile.trades; 
     $scope.activetrade = $scope.trades[0]; 
     $scope.ready = true; 


    init(); //I need to call this function after update is complete 

}); 

そして、これがinit()機能で何が起こるかです：

function init(){ 
    alert($('#wrapper').width()); 
    alert($('#wrapper').height()); 
} 

私はそこにこの問題を解決するための簡単なものになるが、私はすることができなければならないことを知っています今すぐ見つけてください。 ありがとうございます。

Answer 1

は、実はこのケースでは、角度の方法は、簡単な方法だけ正しい方法ではありません:)

あなたはディレクティブを書いて、あなたはの高さを知りたい要素にアタッチする必要があります。そしてあなたが$イベントを放送しているコントローラから、指示文がイベントを捕まえるでしょう。そこにDOM操作をすることができます。決してコントローラの中にいない。

var tradesInfo = TradesInfo.get({}, function(data){ 
    console.log(data); 
    $scope.source.profile = data.profile; 
    ... 

    $scope.$broadcast('dataloaded'); 
}); 


directive('heightStuff', ['$timeout', function ($timeout) { 
    return { 
     link: function ($scope, element, attrs) { 
      $scope.$on('dataloaded', function() { 
       $timeout(function() { // You might need this timeout to be sure its run after DOM render. 
        element.width() 
        element.height() 
       }, 0, false); 
      }) 
     } 
    }; 
}]); 

Answer 2

JQueryを使用するもう1つの提案。 ディレクティブで生成されたグリッドに対して、これを実行する必要がありました。私はグリッド内の特定の行にスクロールしたかったのです。ディレクティブで

['$timeout',function($timeout){ 
... 
$scope.$on('dataloaded', function() { 
      $timeout(function() { // You might need this timeout to be sure its run after DOM render. 
       $scope.scrollToPosition(); 
      }, 0, false); 
     }); 
     $scope.scrollToPosition = function() { 
      var rowpos = $('#row_' + $scope.selectedActionID, "#runGrid").position(); 
      var tablepost = $('table', "#runGrid").position(); 
      $('#runGrid').scrollTop(rowpos.top - tablepost.top); 
     } 

.directive('runGrid',['$timeout', function ($timeout) { 
     // This directive generates the grip of data 
     return { 
      restrict: 'E', //DOM Element 
      scope: { //define isolated scope 
       list: '=', //use the parent object 
       selected: "=" 
      }, 

      templateUrl: '/CampaignFlow/StaticContent/Runs/run.grid.0.0.0.0.htm', //HTML template URL 

      controller: ['$scope', function ($scope) { //the directive private controller, whith its private scope 
       //$scope.statusList = [{ data_1: 11, data_2: 12 }, { data_1: 21, data_2: 22 }, { data_1: 31, data_2: 32 }]; 
       //Controller contains sort functionallity 

       $scope.sort = { column: null, direction: 1 } 
       $scope.column = null; 
       $scope.direction = "asc"; 
       $scope.sortColumn = function (id) { 
        if(id!=$scope.column) { 
         $scope.column = id; 
         $scope.direction = "asc"; 
        } else { 
         $scope.column = null; 
        } 
       } 
       $scope.toggleDir = function() { 
        $scope.direction = ($scope.direction == "asc") ? "desc" : "asc"; 
       } 
       $scope.$emit('dataloaded'); 
      }] 


     }; 
    }]) 

そして、これは、グリッドディレクティブHTMLテンプレートの抜粋です：コントローラで

：$親コントローラに指令から放送するために発する使用

<div style="overflow-y:auto;height: 200px;" id="runGrid"> 
      <table class="table table-striped" style="table-layout:fixed"> 
      <tbody> 
       <tr ng-repeat="status in list" id="row_{{status.action_id}}" ng-class="(status.action_id==selected)?'selected':''"> 
        <td> 

リストと選択されたパラメータが、direを使用しているhtmlから注入されますctive

<run-grid list="list" selected="selectedActionID"></run-grid> 

Answer 3

オリバーの答えは良いですが、問題があります：あなたは、イベントをブロードキャストすることを忘れた場合、あなたのデータが変更された可能性がある一方で、あなたのjavascriptが実行されません。 別の解決策は、例えば、スコープの変更を監視するために、次のようになります。

var tradesInfo = TradesInfo.get({}, function(data) { 
    console.log(data); 
    $scope.profile = data.profile; 
    // ... 
}); 


directive('heightStuff', ['$timeout', 
    function($timeout) { 
    return { 
     scope: { 
     myData: '=' 
     }, 
     link: function($scope, element, attrs) { 
     $scope.$watch('myData', function() { 
      $timeout(function() { // You might need this timeout to be sure its run after DOM render. 
      element.width() 
      element.height() 
      }, 0, false); 
     }) 
     } 
    }; 
    } 
]); 

<div height-stuff my-data="profile"></div> 

javascriptの機能が毎回カスタムイベントを全く必要とせずにデータの変更と呼ばれているこの方法です。

Answer 4

これまでの回答では、ngRepeatの実行後に実行する必要があったコードが角度コードであるため、別の回答を追加したいと思います。その場合、上記のすべての回答はすばらしい単純な解決策ですダイジェストライフサイクルの重要な段階では、Ben Nadelのブログ（$ evalの代わりに$ parseを使用しています）を見てみることができます。

私の経験では、OPの状態として、最終的にコンパイルされたDOMでいくつかのjQueryプラグインやメソッドが実行されています。この場合、最も簡単な解決策はsetTimeoutのディレクティブを作成することですsetTimeout関数は$タイムアウトを使用していない理由を不思議誰のために機能

angular.module('myApp', []) 
.directive('pluginNameOrWhatever', function() { 
    return function(scope, element, attrs) {   
    setTimeout(function doWork(){ 
     //jquery code and plugins 
    }, 0);   
    }; 
}); 

をpostLinkingその親の後に続けている通常ng-repeat、すべてが角度で行われた直後にその常に、ブラウザのキューの最後にプッシュされますそれは完全に不要な別のダイジェストサイクルを引き起こすということです。

EDIT：

ありがとうあなたがすることはできませんhttp://www.codelord.net/2015/10/14/angular-nitpicking-differences-between-timeout-and-settimeout/