Bagaimana Menggunakan jQuery dengan Berkesan dengan ng-repeat dalam AngularJS?

Juggling ng-Repeat dan jQuery

Apabila bekerja dengan ng-repeat, anda mungkin menghadapi situasi di mana anda perlu memanipulasi DOM menggunakan jQuery selepas elemen ng-repeat telah diisi. Walau bagaimanapun, hanya bergantung pada $(document).ready() atau $scope.$on('$viewContentLoaded', myFunc) mungkin tidak mencukupi.

Untuk menangani cabaran ini, pertimbangkan untuk menggunakan arahan. Tidak seperti acara yang dikaitkan secara khusus dengan penyiapan ng-repeat, arahan membolehkan anda melakukan tindakan berdasarkan keadaan tertentu dalam gelung ng-repeat.

Jika matlamat anda adalah untuk menggunakan penggayaan atau menambah acara pada keseluruhan jadual yang diberikan oleh ng -repeat, anda boleh membuat arahan yang merangkumi semua elemen ng-repeat. Sebagai alternatif, jika anda perlu menangani setiap elemen secara individu, anda boleh menggunakan arahan dalam ng-repeat, memastikan pelaksanaannya selepas setiap elemen dicipta.

Selain itu, ng-repeat menyediakan sifat seperti $index, $ pertama, $tengah, dan $akhir yang boleh memudahkan peristiwa pencetus. Sifat ini boleh digunakan untuk melakukan tindakan tertentu, seperti menambah sempadan atau memaklumkan penyiapan elemen terakhir.

Pertimbangkan kod HTML berikut:

<div ng-controller="Ctrl" my-main-directive>
  <div ng-repeat="thing in things" my-repeat-directive>
    thing {{thing}}
  </div>
</div>

Untuk mengendalikan penggayaan elemen dan tindakan lain, anda boleh membuat arahan berikut:

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');
    };
  });

Penyelesaian ini menunjukkan cara menggunakan arahan dalam ng-repeat untuk melaksanakan tindakan tertentu selepas setiap elemen dicipta atau berdasarkan kedudukannya dalam gelung.

Atas ialah kandungan terperinci Bagaimana Menggunakan jQuery dengan Berkesan dengan ng-repeat dalam AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!