[解決済み】ng-repeatの終了イベント
2022-05-03 06:27:14
質問
テーブルを持つdivをターゲットとして、あるjQuery関数を呼び出したいのです。そのテーブルには
ng-repeat
.
で呼び出すと
$(document).ready()
結果が出ません。
また
$scope.$on('$viewContentLoaded', myFunc);
は役に立ちません。
ng-repeat population が終了した直後に関数を実行する方法はありますか?私は、カスタム
directive
しかし、ng-repeatと私のdivでそれをどのように使用するのか、手がかりがありません...
解決方法は?
確かに、ディレクティブを使うべきですし、ng-Repeatループの終了に関連するイベントはありません(各要素は個別に構築され、それ自身のイベントを持つため)。しかし、a) ディレクティブを使用することがすべてかもしれませんし、b) "on ngRepeat finished" イベントを作成するために使用できるいくつかのng-Repeat固有のプロパティがあります。
具体的には、テーブル全体にイベントを追加したい場合は、すべてのngRepeat要素を包含するディレクティブを使用して行うことができます。一方、各要素に特化したい場合は、ngRepeat内のディレクティブを使用すれば、各要素が作成された後、その要素に作用します。
次に
$index
,
$first
,
$middle
と
$last
プロパティを使用すると、イベントをトリガすることができます。つまり、このHTMLの場合
<div ng-controller="Ctrl" my-main-directive>
<div ng-repeat="thing in things" my-repeat-directive>
thing {{thing}}
</div>
</div>
このようにディレクティブを使うことができます。
angular.module('myApp', [])
.directive('myRepeatDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('color','blue');
if (scope.$last){
window.alert("im the last!");
}
};
})
.directive('myMainDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('border','5px solid red');
};
});
実際に使っている様子をご覧ください。 プランカー . お役に立てれば幸いです。
関連
-
[解決済み】JavaScriptのisset()に相当するもの
-
[解決済み] AngularJSのng-repeatは、空のリストのケースを処理します。
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み] イベントバブリング、キャプチャーとは何ですか?
-
[解決済み] jQueryのイベントハンドラを削除する最良の方法?
-
[解決済み] イベントを発生させた要素のIDを取得する
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
-
[解決済み] 配列上で繰り返すのではなく、定義された回数をng-repeatする方法?
-
[解決済み] ネストしたng-repeatの中で2つの$index値を渡す
-
[解決済み] Angular.jsディレクティブの動的テンプレートURL
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】このエラーの原因は何ですか - "Fatal error: ローカルgruntを見つけることができません"
-
[解決済み】Javascript:getElementById対getElementsById(両方が別のページで動作する)。
-
[解決済み】document.getElementByIDは関数ではありません。
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】NodeJS "ESモジュールをロードするためにインポートを使用する必要があります。"
-
[解決済み】別のjsファイル内でJavaScriptの関数を呼び出す
-
[解決済み】ETIMEDOUTエラーの対処方法は?
-
[解決済み】中央値の計算 - javascript
-
[解決済み】ng-repeatが終了したときに関数を呼び出す
-
[解決済み] 巨大なデータセットに対するngRepeatのパフォーマンスを向上させる方法(angular.js)?