Perbedaan antara fungsi 'controller', 'link' dan 'compile' saat mendefinisikan suatu arahan

393

Beberapa tempat tampaknya menggunakan fungsi pengontrol untuk logika direktif dan yang lain menggunakan tautan. Contoh tab pada beranda sudut menggunakan pengontrol untuk satu dan tautan untuk pengarahan lain. Apa perbedaan keduanya?

pengguna1558259
sumber
2
Mungkin gambaran yang lebih komprehensif dari fungsi direktif: Arahan arahan - kapan harus menggunakan kompilasi, controller, pra-tautan dan pasca-tautan .
Izhaki

Jawaban:

635

Saya akan sedikit memperluas pertanyaan Anda dan juga menyertakan fungsi kompilasi.

  • kompilasi fungsi - gunakan untuk manipulasi DOM templat (yaitu, manipulasi tElement = elemen templat), karenanya manipulasi yang berlaku untuk semua klon DOM templat yang terkait dengan arahan. (Jika Anda juga memerlukan fungsi tautan (atau fungsi tautan sebelum dan sesudah), dan Anda mendefinisikan fungsi kompilasi, fungsi kompilasi harus mengembalikan fungsi tautan karena 'link'atribut diabaikan jika 'compile'atribut ditentukan.)

  • fungsi tautan - biasanya digunakan untuk mendaftarkan panggilan balik pendengar (yaitu, $watchekspresi pada ruang lingkup) serta memperbarui DOM (yaitu, manipulasi iElement = elemen contoh individual). Ini dieksekusi setelah template telah dikloning. Misalnya, di dalam <li ng-repeat...>, fungsi tautan dijalankan setelah <li>templat (tElement) telah dikloning (menjadi iElement) untuk <li>elemen tertentu . A $watchmemungkinkan arahan untuk diberitahu tentang perubahan properti lingkup (lingkup terkait dengan setiap instance), yang memungkinkan arahan untuk memberikan nilai instance yang diperbarui ke DOM.

  • fungsi pengontrol - harus digunakan ketika arahan lain perlu berinteraksi dengan arahan ini. Misalnya, pada beranda AngularJS, arahan panel perlu menambahkan dirinya sendiri ke ruang lingkup yang dikelola oleh arahan tab, maka arahan tab perlu menentukan metode pengontrol (bayangkan API) yang arahan pane dapat akses / panggil.

    Untuk penjelasan yang lebih mendalam tentang arahan tab dan panel, dan mengapa arahan tab membuat fungsi pada pengontrolnya menggunakan this(bukan pada $scope), silakan lihat 'this' vs $ scope pada pengontrol AngularJS .

Secara umum, Anda dapat memasukkan metode $watches,, dll ke dalam pengontrol direktif atau fungsi tautan. Pengontrol akan berjalan terlebih dahulu, yang terkadang penting (lihat biola yang mencatat ketika fungsi ctrl dan tautan dijalankan dengan dua arahan bersarang). Seperti yang disebutkan Josh dalam komentar , Anda mungkin ingin meletakkan fungsi manipulasi-lingkup di dalam pengontrol hanya untuk konsistensi dengan sisa kerangka kerja.

Mark Rajcok
sumber
131
Penjelasan ini harus dalam dokumen AngularJS utama atau setidaknya referensi untuk itu
Dogoku
7
Ini adalah jawaban yang informatif tetapi saya rasa sulit untuk dibaca. Mungkin lebih banyak tanda baca dan kalimat yang lebih kecil dapat membantu. Secara keseluruhan saya bersyukur atas jawabannya.
Marty Cortez
$ Compiler mengabaikan atribut 'tautan' di hadapan atribut 'kompilasi'. Tetapi bagaimana dengan kehadiran atribut 'controller'? Apakah 'controller' menyebabkan $ compiler mengabaikan atribut 'link' dan 'compile' atau keduanya? Apakah mungkin dan / atau disarankan untuk menggunakan 'kompilasi' bersama dengan 'pengontrol'?
Carl G
1
@ CarlG, keberadaan atribut pengontrol tidak berpengaruh pada $ compiler sehubungan dengan tautan dan kompilasi. Anda dapat menggunakan kompilasi dan pengontrol.
Mark Rajcok
1
"Pendengar DOM" TIDAK "(yaitu, ekspresi $ tonton pada ruang lingkup)". Satu mendengarkan DOM untuk acara seperti mouseover, yang lain untuk lingkup perubahan properti. Perbedaan besar.
Dmitri Zaitsev
56

Sebagai pelengkap jawaban Mark, fungsi kompilasi tidak memiliki akses ke cakupan, tetapi fungsi tautannya.

Saya sangat merekomendasikan video ini; Arahan Menulis oleh Misko Hevery (ayah dari AngularJS), di mana ia menggambarkan perbedaan dan beberapa teknik. (Perbedaan antara fungsi kompilasi dan fungsi tautan pada tanda 14:41 di video ).

Pixic
sumber
3
+1 untuk tautan ke video. Ini sangat informatif.
Rob Kielty
2
jvandemo.com/...
EMuentes
35
  1. menjalankan kode sebelum Kompilasi: gunakan controller
  2. menjalankan kode setelah Kompilasi: gunakan Tautan

Konvensi sudut: tulis logika bisnis di pengontrol dan manipulasi DOM di tautan.

Terlepas dari ini, Anda dapat memanggil satu fungsi pengontrol dari fungsi tautan dari arahan lain. Misalnya Anda memiliki 3 arahan khusus

<animal>
<panther>
<leopard></leopard>
</panther> 
</animal>

dan Anda ingin mengakses hewan dari dalam direktif "macan tutul".

http://egghead.io/lessons/angularjs-directive-communication akan sangat membantu untuk mengetahui tentang komunikasi antar-direktif

Rahul
sumber
18
+ msgstr "jalankan kode sebelum Kompilasi: gunakan pengontrol". Ini salah; compileakan selalu dieksekusi sebelumnya controller .
Izhaki
Anda tidak akan (setidaknya tidak secara langsung) dapat mengakses hewan dari arahan macan tutul Anda. Arahan anak dapat mengakses metode pengontrol dalam arahan induk, tetapi arahan saudara kandung (seperti dalam contoh di atas) tidak dapat memanggil pengontrol satu sama lain.
Benjamin White
2
Apakah macan tutul benar-benar sejenis macan kumbang? Juga, di samping catatan ... Bisakah Anda memiliki tautan - DAN - pengontrol dalam arahan?
Cody
1
ya macan tutul / jaguar adalah macan kumbang. dan ya Anda memiliki tautan dan pengontrol dalam arahan.
Rahul
1
Dari panduan pengembang Angular: "Praktik Terbaik: gunakan pengontrol saat Anda ingin mengekspos API ke arahan lain. Jika tidak, gunakan tautan."
Martin van Driel
6

fungsi kompilasi -

  1. dipanggil sebelum fungsi pengontrol dan tautan.
  2. Dalam fungsi kompilasi, Anda memiliki template DOM asli sehingga Anda dapat membuat perubahan pada DOM asli sebelum AngularJS membuat instance dan sebelum ruang lingkup dibuat
  3. ng-repeat adalah contoh sempurna - sintaks asli adalah elemen template, elemen yang diulang dalam HTML adalah instance
  4. Mungkin ada beberapa instance elemen dan hanya satu elemen template
  5. Lingkup belum tersedia
  6. Fungsi kompilasi dapat mengembalikan fungsi dan objek
  7. mengembalikan fungsi (pasca-tautan) - sama dengan mendaftarkan fungsi tautan melalui properti tautan dari objek konfigurasi saat fungsi kompilasi kosong.
  8. mengembalikan objek dengan fungsi yang terdaftar melalui properti pre dan post - memungkinkan Anda untuk mengontrol kapan fungsi penautan harus dipanggil selama fase penautan. Lihat info tentang fungsi pre-linking dan post-linking di bawah ini.

sintaksis

function compile(tElement, tAttrs, transclude) { ... }

pengontrol

  1. dipanggil setelah fungsi kompilasi
  2. ruang lingkup tersedia di sini
  3. dapat diakses oleh arahan lain (lihat memerlukan atribut)

pra-tautan

  1. Fungsi tautan bertanggung jawab untuk mendaftarkan pendengar DOM serta memperbarui DOM. Itu dieksekusi setelah template telah dikloning. Di sinilah sebagian besar logika arahan akan diletakkan.

  2. Anda dapat memperbarui dom di controller menggunakan angular.element tetapi ini tidak dianjurkan karena elemen disediakan dalam fungsi tautan

  3. Fungsi pra-tautan digunakan untuk mengimplementasikan logika yang berjalan ketika sudut js telah mengkompilasi elemen turunan tetapi sebelum salah satu tautan pos elemen turunan dipanggil

posting-tautan

  1. arahan yang hanya memiliki fungsi tautan, sudut memperlakukan fungsi tersebut sebagai tautan pos

  2. posting akan dieksekusi setelah kompilasi, pengontrol dan fungsi pre-link, jadi itu sebabnya ini dianggap sebagai tempat teraman dan default untuk menambahkan logika arahan Anda

Sunil Garg
sumber