1. ホーム
  2. ジャバスクリプト

[解決済み】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');
  };
});

実際に使っている様子をご覧ください。 プランカー . お役に立てれば幸いです。