[解決済み】ng-repeatが終了したときに関数を呼び出す
2022-04-01 03:20:27
質問
私が実装しようとしているのは、基本的に "on ng repeat finished rendering" ハンドラです。レンダリングが完了したことを検出することはできますが、そこから関数をトリガーする方法がわかりません。
フィドルを確認してください。 http://jsfiddle.net/paulocoelho/BsMqq/3/
JS
var module = angular.module('testApp', [])
.directive('onFinishRender', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
element.ready(function () {
console.log("calling:"+attr.onFinishRender);
// CALL TEST HERE!
});
}
}
}
});
function myC($scope) {
$scope.ta = [1, 2, 3, 4, 5, 6];
function test() {
console.log("test executed");
}
}
HTML
<div ng-app="testApp" ng-controller="myC">
<p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p>
</div>
回答 : フィニッシングムーヴから動くバイオリン。 http://jsfiddle.net/paulocoelho/BsMqq/4/
解決方法は?
var module = angular.module('testApp', [])
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit(attr.onFinishRender);
});
}
}
}
});
を使っていないことに注意してください。
.ready()
でラップするのではなく
$timeout
.
$timeout
は、ng-repeated 要素が本当にレンダリングを終了したときに実行されることを確認します (なぜなら
$timeout
は、現在のダイジェストサイクルの終了時に実行されます --。
を呼び出し、さらに
$apply
とは異なり、内部で
setTimeout
). そのため
ng-repeat
が終了したら
$emit
を使用して、外部スコープ(兄弟スコープと親スコープ)にイベントを発信します。
そして、コントローラで、それを
$on
:
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
//you also get the actual event object
//do stuff, execute functions -- whatever...
});
このような感じのhtmlで。
<div ng-repeat="item in items" on-finish-render="ngRepeatFinished">
<div>{{item.name}}}<div>
</div>
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン