AngularJS で ng-repeat で jQuery を効果的に使用する方法は?

ng-Repeat と jQuery のジャグリング

ng-repeat を使用する場合、jQuery を使用して DOM を操作する必要がある状況に遭遇することがあります。 ng-repeat 要素が設定された後。ただし、単に $(document).ready() または $scope.$on('$viewContentLoaded', myFunc) に依存するだけでは十分ではない可能性があります。

この課題に対処するには、ディレクティブの利用を検討してください。 ng-repeat の完了に特に関連付けられたイベントとは異なり、ディレクティブを使用すると、ng-repeat ループ内の特定の条件に基づいてアクションを実行できます。

目的が、ng によってレンダリングされるテーブル全体にスタイルを適用したり、イベントを追加したりすることである場合-repeat を使用すると、すべての ng-repeat 要素を含むディレクティブを作成できます。あるいは、各要素を個別に指定する必要がある場合は、ng-repeat 内でディレクティブを使用して、各要素の作成後にディレクティブが確実に実行されるようにすることもできます。

さらに、ng-repeat は $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');
    };
  });

このソリューションでは、ng-repeat 内でディレクティブを使用して実行する方法を示します。各要素が作成された後、またはループ内の位置に基づいて特定のアクションを実行します。

以上がAngularJS で ng-repeat で jQuery を効果的に使用する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。