$scope 変数 (この場合は $scope.results) に変更を加えた後にコードを実行する方法を探しています。実行する前にアイテムが DOM 内にあることを必要とするレガシー コードを呼び出すために、これを実行する必要があります。
実際のコードは、AJAX 呼び出しをトリガーし、UI を更新するためにスコープ変数を更新しています。そのため、現在、コードはスコープにプッシュした直後に実行されますが、DOM 要素がまだ利用できないため、レガシー コードは失敗します。
setTimeout() を使用して醜い遅延を追加することもできますが、それによって DOM が本当に準備完了であることが保証されるわけではありません。
私の質問は、「レンダリングされた」ようなイベントにバインドできる方法はあるかどうかです。
var myApp = angular.module('myApp', []);
myApp.controller("myController", ['$scope', function($scope){
var resultsToLoad = [{id: 1, name: "one"},{id: 2, name: "two"},{id: 3, name: "three"}];
$scope.results = [];
$scope.loadResults = function(){
for(var i=0; i < resultsToLoad.length; i++){
$scope.results.push(resultsToLoad[i]);
}
}
function doneAddingToDom(){
// do something awesome like trigger a service call to log
}
}]);
angular.bootstrap(document, ['myApp']);
シミュレーションコードへのリンク:http://jsfiddle.net/acolchado/BhApF/5/
前もって感謝します!
ベストアンサー1
の$evalAsyncキューは、現在のスタック フレームの外部で、ブラウザーのビューがレンダリングされる前に実行する必要がある作業をスケジュールするために使用されます。--http://docs.angularjs.org/guide/concepts#runtime
さて、「スタック フレーム」とは何でしょうか? Github のコメントでさらに詳しく説明されています。
コントローラーからエンキューする場合は前になりますが、ディレクティブからエンキューする場合は後になります。 --https://github.com/angular/angular.js/issues/734#issuecomment-3675158
上記で、Misko は、$evalAsync によって実行キューに入れられたコードがいつ実行されるかを、Angular によって DOM が更新されるタイミングと関連させて説明しています。完全なコンテキストを把握するには、前の 2 つの Github コメントも読むことをお勧めします。
それでディレクティブから$evalAsyncを使用してコードがキューに入れられる場合DOMがAngularによって操作された後、ブラウザがレンダリングする前に実行する必要があります。ブラウザがレンダリングした後、またはコントローラがモデルを更新した後に何かを実行する必要がある場合は、$timeout(..., 0);
参照https://stackoverflow.com/a/13619324/215945には、$evalAsync() を使用するサンプル フィドルもあります。