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

AngularJs : Custom ng-hide directive

Kembali bermain dengan AngularJs. Berawal karena adanya project yang membuat user memiliki kemampuan yang dinamis dan disimpan pada session storage. 

Solution 1

Pada awalnya pengecheckan dilakukan di controller masing". Hasilnya cukup merepotkan, karena setiap controller harus melakukan pengecheckan sendiri dan apabila ada perubahan membutuhkan banyak effort untuk melakukan perbaikan. 

Solution 1

Solution 2

Setelah itu saya berpikir untuk melakukan pengecheckan di satu tempat saja agar perubahan pengecheckan hanya dilakukan di satu tempat. Sehingga saya memindahkan tempat pengechekan pada service. Dengan demikian controller memiliki kewajiban untuk memanggil service untuk melakukan pengecheckan dan melemparkan hasilnya ke html.

Solution 2

Solution 3

Cara tersebut sudah terimplementasi di beberapa project hingga suatu sore saya ketika sedang merenung di taman saya mendapat pencerahan. Kenapa tidak dibuat directive saja yang melakukan pengecheckan terhadap value itu?

Akhirnya saya melakukan sedikit custom atau mengadopsi apa yang dilakukan pada directive angular yang cukup terkenal yaitu ng-hide / ng-show dengan melakukan pengecheckan variable yang ada pada session storage. 

Solution 3

Demikian secara teori solusinya. Berikut akan saya tunjukkan bentuk data yang tersimpan pada session storage dan penggunaan directivenya.

Privilege di Session Storage :

$scope.privileges = [
    {"name": "create_user"},
    {"name": "update_user"},
    {"name": "read_user"},
    {"name": "delete_user"}]

Directive

'use strict';angular.module('nostraApp')
     .directive('hasPrivilege', ['$sessionStorage', function ($sessionStorage){
            return {
                restrict: 'A',
                link: function(scope, element, attributes) {
                    scope.$watch(attributes.hasPrivilege, 
                     function(checkPrivilege){
                        var value = false;
                        if($sessionStorage.privileges){
                        var listPriv = $sessionStorage.privileges;
                        var privilege = listPriv.map(function (e) {
                            return e.name;
                        }).indexOf(checkPrivilege);
                        if (privilege != -1) {
                            value =  true;
                          }}
                       element.css('visibility', value ? 'visible' : 'hidden');
                       element.css('display', value ? 'inline' : 'none');
                   });
                }};
        }]);

HTML :

<button type="button" ng-click="addUser()" has-privilege='"create_user"'>
 Tambah User
</button>

Dengan demikian tidak ada lagi tambahan code di controller maupun service untuk melakukan pengecheckan. Tentunya hal ini tidak terikat hanya pada angular1 saja tetapi konsep juga dapat di implementasikan di angular2 ataupun angular 4.
Untuk kali ini sekian saja yang dapat saya bagikan untuk mempermudah pekerjaan kali ini. Semoga dapat berguna. Happy Coding~ :D

AngularJS Fact : Angular for input type file

AngularJS memiliki kemampuan yang merupakan fitur yang mereka jual yaitu two-way data binding. Hal tersebut dimiliki baik di angular1 maupun angular2. Dengan kemampuan two data bindingnya angular telah melakukan pembindinga data secara otomatis sesuai dengan variable yang telah kita definisikan. Untuk lebih mengerti mengenai angular two-way data binding dapat di baca lebih lengkap pada tulisan saya yang lain. 

Walaupun demikian masih ada tipe input yang tidak memiliki binding otomatis dari angular. Salah satunya adalah untuk input type file. Jangan pernah berharap ng-model dapat digunakan pada input type file. Lalu apa yang bisa kita lakukan?

Ada beberapa cara agar file input dapat digunakan di controller : 

1. Mengirim langsung ke controller melalui method

   Pada saat apakah kita perlu mengirim file? Yap pada saat perubahan yang terjadi pada input type. Tetapi karena pada dasarnya karena input type file tidak disupport oleh angular, ng-change pun tidak dapat berjalan pada tag tersebut. Sehingga untuk mendeteksi perubahan yang terjadi kita dapat menggunakan onChange yang dimiliki oleh javascript.

Berikut adalah html yang digunakan untuk mengirim file ke controller menggunakan onchange : 

<input name="upload" id="coverImage" type="file" class="hidden" 
onchange="angular.element(this).scope().addImage(this)">

Dengan demikian kita hanya perlu membuat function addImage() yang akan menerima file untuk di binding pada scope. Berikut sample function yang perlu dibuat : 

self.addImage= function (ele) {
    $scope.file = ele.files[0],self.imageCoverObject;};

Note : 

Karena onChange bukan merupakan directive angular sehingga scope tidak dapat begitu saja di gunakan seperti biasanya. Untuk mendapatkan nama method yang di cari maka kita perlu menggunakan : 

angular.element(this).scope()

Dengan demikian sudah selesai pekerjaan kita untuk mendapatkan file di controller dengan cara pertama.

2. Membuat directive yang akan melakukan injection pada scope.

    Namanya saja Angular, rasanya kurang mantab apabila masih menggunakan javascript. Karenanya berikutnya saya akan menjelaskan bagaimana cara membinding file pada scope menggunakan directive. Untuk directive dengan tujuan input type file sudah banyak macamnya, karenanya saya akan lebih menjelaskan flownya.

Directive yang akan dibuat : 

Html : 

<input name="upload" id="inputFileSample" type="file" file-upload="fileUploads">

Dengan demikian file akan otomatis terbinding pada variable $scope.fileUploads.

Berikut adalah sample data yang akan didapat dengan cara diatas : 

Lengkap dengan info yang kita inginkan untuk di binding pada scope. :)

Demikan adalah cara yang dapat digunakan untuk mendapatkan file di controller. Keduanya tentu dapat dipakai dengan pertimbangan masing- masing.

Sekian dulu dari saya kali ini. Semoga dapat membantu bagi yang membutuhkan cara mendapatkan file di angular controller.

Happy Coding~ :D