Angular Directive Data Binding Tips

Pada kesempatan ini saya ingin berbagi tips ketika bermain dengan Directive component pada AngularJs. Sebelum kita bermain, kita harus tahu terlebih dahulu directive yang ingin kita buat hanya membutuhkan load 1 kali saja atau setiap ada perubahan data akan melakukan perubahan view. 

Biasanya secara default directive yang dibuat hanya meload 1 kali saja pada saat initial load, namun ada juga directive yang membutuhkan logic tambahan jika ada perubahan data, maka bisa langsung menyesuaikan datanya. 

Sebagai contoh, kita mempunyai directive seperti gambar dibawah. 

Directive di atas untuk membuat network graphic pada VisJs. Pada directive di atas mempunyai 3 variable yang harus dipassing kedalam directive. 

1. ngModel : data utama yang diperlukan untuk membuat graphic vis network
2. onSelect  : merupakan method untuk mengambil properties pada nodes yang kita pilih
3. options    : berupa data yang dipakai untuk style ing vis network 

Variable network dipakai untuk membuat graphic network pada VisJs.

Pada directive ini kita tidak menambahkan logic apa apa yang hasilnya hanya menampilkan data sesuai dengan yang pertama di load. 

Bagaimana bentuk directive yang sudah ditambahkan logic agar jika terjadi perubahan data maka akan langsung membuat graphic yang baru? 

Pertama kita define variable network dengan null. Kemudian kita buat scope.$watch yang dipakai untuk memantau perubahan data pada variable ngModel. Jika ngModel nya null, maka tidak akan melakukan apa apa, dan jika variable network nya tidak null, maka graphic yang sudah ada akan di destroy, kemudian akan di create lagi network yang baru dengan data yang baru pula.

Dengan logic seperti di atas kita sudah bisa membuat directive yang dinamis, dimana jika ada perubahan maka akan langsung di implement.

Semoga membantu dan mencerahkan ide !

Happy coding