Memang, Anda harus menggunakan arahan, dan tidak ada peristiwa yang terikat pada akhir loop Ulangi (karena setiap elemen dibangun secara individual, dan memiliki acara itu sendiri). Tetapi a) menggunakan arahan yang mungkin Anda butuhkan dan b) ada beberapa sifat spesifik yang dapat Anda gunakan untuk membuat acara "saat ngRepeat selesai".
Khususnya, jika semua yang Anda inginkan adalah gaya / menambahkan acara ke seluruh tabel, Anda dapat melakukannya dengan menggunakan arahan yang mencakup semua elemen ngRepeat. Di sisi lain, jika Anda ingin membahas setiap elemen secara khusus, Anda dapat menggunakan arahan dalam ngRepeat, dan itu akan bertindak pada setiap elemen, setelah itu dibuat.
Lalu, ada $index
, $first
, $middle
dan $last
sifat dapat Anda gunakan untuk acara pemicu. Jadi untuk HTML ini:
<div ng-controller="Ctrl" my-main-directive>
<div ng-repeat="thing in things" my-repeat-directive>
thing {{thing}}
</div>
</div>
Anda dapat menggunakan arahan seperti:
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');
};
});
Lihat beraksi di Plunker ini . Semoga ini bisa membantu!
myMainDirective
kode dieksekusi hanya setelah akhir dari loop? Saya perlu memperbarui scrollbar div induk.Jika Anda hanya ingin mengeksekusi beberapa kode pada akhir loop, inilah variasi yang sedikit lebih sederhana yang tidak memerlukan penanganan peristiwa tambahan:
Lihat demo langsung.
sumber
Tidak perlu membuat arahan terutama hanya untuk memiliki
ng-repeat
acara yang lengkap.ng-init
melakukan keajaiban untuk Anda.yang
$last
memastikan, bahwafinished
hanya dipecat, ketika elemen terakhir telah diberikan kepada DOM.Jangan lupa buat
$scope.finished
acara.Selamat Coding !!
EDIT: 23 Okt 2016
Jika Anda juga ingin memanggil
finished
fungsi ketika tidak ada item dalam array maka Anda dapat menggunakan solusi berikutCukup tambahkan baris di atas di bagian atas
ng-repeat
elemen. Ini akan memeriksa apakah array tidak memiliki nilai dan memanggil fungsi yang sesuai.Misalnya
sumber
Berikut adalah arahan yang dilakukan berulang yang memanggil fungsi yang ditentukan bila benar. Saya telah menemukan bahwa fungsi yang dipanggil harus menggunakan $ timeout dengan interval = 0 sebelum melakukan manipulasi DOM, seperti menginisialisasi tooltips pada elemen yang diberikan. jsFiddle: http://jsfiddle.net/tQw6w/
Di $ scope.layoutDone, coba komentari baris $ timeout dan batalkan komentar pada "NOT CORRECT!" baris untuk melihat perbedaan pada tooltips.
JS:
sumber
Berikut adalah pendekatan sederhana menggunakan
ng-init
yang bahkan tidak memerlukan arahan khusus. Ini bekerja dengan baik untuk saya dalam skenario tertentu misalnya perlu menggulir otomatis div item yang diulang ke item tertentu pada pemuatan halaman, jadi fungsi gulir harus menunggu sampaing-repeat
selesai selesai rendering ke DOM sebelum dapat diaktifkan.Perhatikan bahwa ini hanya berguna untuk fungsi-fungsi yang perlu Anda panggil satu kali setelah ng-repeat merender pada awalnya. Jika Anda perlu memanggil fungsi setiap kali konten ng-repeat diperbarui maka Anda harus menggunakan salah satu jawaban lain di utas ini dengan arahan khusus.
sumber
Melengkapi jawaban Pavel , sesuatu yang lebih mudah dibaca dan mudah dimengerti adalah:
Kenapa lagi menurutmu
angular.noop
ada di tempat pertama ...?Keuntungan:
Anda tidak perlu menulis arahan untuk ini ...
sumber
ng-init="$last && doSomething( )"
Mungkin pendekatan yang sedikit lebih sederhana dengan
ngInit
dan Lodashdebounce
metode tanpa perlu arahan khusus:Pengendali:
Templat:
Memperbarui
Bahkan ada solusi AngularJS murni yang lebih sederhana menggunakan operator ternary:
Templat:
Ketahuilah bahwa ngInit menggunakan fase kompilasi pranala - yaitu ekspresi dipanggil sebelum arahan anak diproses. Ini berarti bahwa masih diperlukan pemrosesan asinkron.
sumber
ng-init="$last ? refresh() : false"
akan berfungsi. Dan itu bahkan tidak memerlukan Lodash.Mungkin juga diperlukan saat Anda memeriksa
scope.$last
variabel untuk membungkus pemicu Anda dengan asetTimeout(someFn, 0)
. AsetTimeout 0
adalah teknik yang diterima dalam javascript dan itu penting bagi sayadirective
untuk berjalan dengan benar.sumber
Ini merupakan peningkatan dari ide-ide yang diekspresikan dalam jawaban lain untuk menunjukkan cara mendapatkan akses ke properti ngRepeat ($ index, $ first, $ middle, $ last, $ even, $ odd) ketika menggunakan sintaks deklaratif dan ruang lingkup isolasi ( Google merekomendasikan praktik terbaik) dengan arahan elemen. Perhatikan perbedaan utama:
scope.$parent.$last
.sumber
Saya melakukannya dengan cara ini.
Buat arahan
Setelah Anda menambahkannya pada label tempat ini ng-repeat
Dan siap dengan yang akan dijalankan pada akhir ng-repeat.
sumber
Solusi saya adalah menambahkan div untuk memanggil fungsi jika item tersebut adalah yang terakhir dalam pengulangan.
sumber
saya ingin menambahkan jawaban lain, karena jawaban sebelumnya menganggap bahwa kode yang diperlukan untuk menjalankan setelah ngRepeat dilakukan adalah kode sudut, yang dalam hal ini semua jawaban di atas memberikan solusi yang bagus dan sederhana, beberapa lebih umum daripada yang lain, dan jika penting tahap siklus hidup intisari Anda dapat melihat blog Ben Nadel tentang hal itu, dengan pengecualian menggunakan $ parse bukannya $ eval.
tetapi dalam pengalaman saya, seperti yang dinyatakan OP, biasanya menjalankan beberapa plugin JQuery atau metode pada DOM yang dikompilasi secara finnaly, yang dalam hal ini saya menemukan bahwa solusi paling sederhana adalah membuat arahan dengan setTimeout, karena fungsi setTimeout akan didorong ke akhir antrian browser, selalu tepat setelah semuanya dilakukan dalam sudut, biasanya ngReapet yang berlanjut setelah orang tuanya fungsi postLinking
untuk siapa pun yang bertanya-tanya dalam hal itu mengapa tidak menggunakan $ timeout, itu yang menyebabkan siklus intisari yang sama sekali tidak perlu
sumber
Saya harus membuat rumus menggunakan MathJax setelah ng-repeat berakhir, tidak ada jawaban di atas yang memecahkan masalah saya, jadi saya buat seperti di bawah ini. Ini bukan solusi yang bagus , tetapi berhasil untuk saya ...
sumber
Saya menemukan jawaban di sini dipraktekkan dengan baik, tetapi masih perlu menambahkan penundaan
Buat arahan berikut:
Tambahkan ke pengulang Anda sebagai atribut, seperti ini:
Menurut Radu ,:
Bagi saya ini berfungsi, tetapi saya masih perlu menambahkan setTimeout
sumber
Jika Anda hanya ingin mengubah nama kelas sehingga akan diberikan secara berbeda, kode di bawah ini akan membantu.
Kode ini berfungsi untuk saya ketika saya memiliki persyaratan yang sama untuk membuat barang belanjaan dalam daftar belanja saya dalam font Strick trough.
sumber