Bab 2 Directive

Materi yang dipelajari pada bab ini :

  • Membuat custom directive
  • scope
  • link function

2.1 Membuat Custom Directive

Setelah mempelajari beberapa directive dasar yang wajib diketahui untuk menunjang pekerjaan pembuatan aplikasi menggunakan AngularJs, sekarang saatnya belajar membuat directive sendiri yang sesuai dengan kebutuhan.

Secara penggunaan tag, directive di AngularJs terbagi menjadi 4, yaitu :

  1. Element Directive (<my-directive></my-directive> )
  2. Attribute Directive (<div my-directive></div>)
  3. Class Directive (<div class="my-directive"></div>)
  4. Comment Directive (<!--directive:my-directive-->)

Tujuan dari penulisan buku ini adalah saya ingin mengenalkan dasar-dasar dari AngularJS. Berkaitan dengan tujuan tersebut, karena materi directive ini sangat dalam dan rumit maka saya hanya menulis hal dasar yang sekiranya penting.

Sekarang mari kita lihat struktur paling dasar dari custom directive di AngularJs. Secara kodingan cara me-register custom directive hampir sama dengan me-register controller, beda di method yang digunakan dan nilai kembalian. Saat membuat directive kita diharuskan untuk mengembalikan objek directive yang memiliki beberapa property. 

app.directive('myDirective',function(){
  return {
    restrict:'EA',
    template:'<h2>Hello {{dunia}}</h2>'
  };
});

Tulis kode di atas pada file MyDirective.js yang ada pada folder js/directives. Jangan lupa untuk membuat AngularJs modul terlebih dahulu dan pasang di view seperti workflow yang biasa. Buat juga controller-nya sebagai berikut.

app.controller('MainController',['$scope', function($scope){
  $scope.dunia="Dunia Indonesia";
}]);

Untuk view bisa kita tampilkan directive yang kita buat tadi.

<html>
  <head>
  </head>
  <body ng-app="MyApp">
    <div ng-controller="MainController">
      <my-directive></my-directive>
      <hr/>
      <div my-directive></div>
    </div>

    <script src="js/angular.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/MainController.js"></script>
    <script src="js/directives/MyDirective.js"></script>
  </body>
<html>

Karena kita mengatur nilai property restricted sebagai EA yang artinya Element dan Attribute maka kita bisa menggunakan directive baik sebagai element maupun attribute. Untuk class dan comment, string yang digunakan berurutan adalah C dan M.

<my-directive></my-directive>
<div my-directive></div>

Ngomong-ngomong kenapa directive kita menggunakan my-directive padahal kita di kodingan menuliskannya dengan myDirective ?. Itu adalah convention dari AngularJs.

Sekarang buka file view pada browser dan lihat hasil yang muncul.

"directive"

Bisa dipahami?. Kalimat Dunia Indonesia muncul berasal dari variabel dunia yang ada pada controller kemudian dimunculkan melalui ekpresi {{dunia}} yang ada di dalam directive. Dari sini bisa diketahui bahwa semua variabel yang ada di scope controller juga bisa diakses dari directive yang berada di bawah controller tersebut.

Selanjutnya ketika dilihat melalui jendela inspect element terlihat bahwa kalimat Hello Dunia Indonesia yang menggunakan tag h2 terletak di dalam tag directive yang kita buat.

<my-directive>
  <h2 class="ng-binding">Hello Dunia Indonesia</h2>
</my-directive>

Jika ingin posisi dari template yang kita gunakan tidak berada di dalam tag directive kita bisa mengaturnya dengan menggunakan properti replace yang bernilai true. Ketika replace bernilai true maka directive akan digantikan / di-replace dengan apa yang ada pada properti template.

app.directive('myDirective',function(){
  return {
    restrict:'EA',
    template:'<h2>Hello {{dunia}}</h2>',
    replace:true
  };
});

Sampai sini saya minta pembaca untuk memahami dulu bagaimana tulisan Hello Dunia Indonesia bisa muncul. Amati baik-baik tiap langkah dan penjelasa yang saya berikan, dan sebisa mungkin untuk mencobanya sendiri dengan mengetikkan kode, bukan copy – paste hehe.

Meskipun directive yang kita buat masih sederhana namun ada hal-hal penting yang bisa kita pelajari. Kita sudah menggunakan tiga buah properti dari directive. Mari bahas satu per satu.

  1. restricted – property ini untuk mengatur bagaimana directive kita akan digunakan. Ingat ada 4 jenis penggunaan directive. Ada 4 string untuk masing-masing yaitu E,A,C,M. Penggunaanya bisa digabung missal EA,
  2. template – propertiini sebagai template yang akan ditampilkan ketika directive di-render. Jika ingin yang di-render adalah sebuah halaman HTML dari file lain maka yang digunakan adalah property templateUrl dengan nilai lokasi path file html yang bersangkutan.
  3. replace – untuk mengatur apakah template yang ditampilkan me-replace tag directive atau tidak.

2.2 Scope

Pada sub bab sebelumnya saya sudah sempat menyinggung masalah scope yang ada didalam directive yang sebenarnya adalah scope yang berada di parent-nya. Lihat kembali kode terakhir dimana ekspresi mengambil variabel dunia yang ada di controller.

Bisa jadi ada kasus di mana kita membuat sebuah directive yang menggunakan scope yang bukan berasal dari parent-nya. Ada 2 cara untuk melakukannya yaitu :

  1. Child Scope
  2. Isolated Scope

Sebelum kita lari ke dua jenis scope tersebut akan lebih baik saya menjelaskan terlebih dahulu kenapa kita ingin menggunakan baik child scope maupun isolated scope.

Scope yang ada di directive itu secara default berasal dari scope yang dimiliki oleh parent-nya seperti yang sudah saya katakan sebelumnya. Pahami benar-benar kalimat saya yang itu. Karena scope tersebut merujuk ke scope yang sama maka ketika scope yang ada pada directive berubah, secara automatis scope yang ada di parent juga berubah, make sense kan?

Berikut ini contoh dari penjelasan di atas. Kita masih menggunakan controller yang sama dengan contoh sebelumnya. 

app.controller('MainController',['$scope', function($scope){
  $scope.dunia="Dunia Indonesia";
}]);

Untuk directive dan view ada sedikit perubahan. Berikut directive yang digunakan, ada tambahan properti link di dalamnya (materi link akan saya jelaskan pada sub bab berikutnya).

app.directive('myDirective',function(){
  return {
    restrict : 'EA',
    template : '<h2>Hello {{dunia}}</h2>',
    replace : true,
    link : function(scope,elem,attrs){
        elem.bind('click',function(){
          scope.dunia='Saya diklik';
          scope.$digest();
        });
    }
  };
});

Maksud dari link di atas adalah ketika directive diklik maka variabel dunia yang ada pada scope akan diganti nilainya menjadi Saya diklik.

View juga mengalami sedikit perubahan. Bagian atas digunakan untuk menampilkan variabel dunia yang ada di controller (parent) sedangkan yang bawah untuk variabel yang ada di directive.

<div ng-controller="MainController">
  <b>dunia</b> dari parent scope </br>
  <h2>Hello {{dunia}} </h2>
  <hr/>
  <b>dunia</b> dari directive scope </br>

  <my-directive></my-directive>
</div>

Ketika dijalankan maka yang muncul adalah seperti pada gambar di bawah.

"directive"

Sekarang kita coba klik tulisan Hello Dunia Indonesia yang berada pada bagian bawah yaitu pada bagian directive yang sudah kita tambahai fungsi untuk mengubah nilai variabel dunia ketika diklik. Maka yang terjadi adalah bukan hanya tulisan yang bawah yang berubah tetapi juga tulisan bagian atas. Hal ini sesuai penjelasan saya di atas, karena variabel yang diacu adalah variabel yang sama maka ketika berubah semuanya ikut berubah.

Hal – hal seperti inilah yang ingin dihindari karena bisa menyebabkan kekacauan jika variabel yang ada pada directive mengacu ke variabel yang sama pada parent-nya. Sebenarnya kita ingin mengubah yang ada pada directive saja, eh namun yang ada pada parent ikut berubah juga.

"directive

Gambar di atas menunjukkan perubahan yang terjadi ketika directive diklik. Tampak jelas bagian parent juga ikut berubah.

2.2.1 Child Scope

Child scope adalah scope yang merupakan prototype dari parent scope. Artinya bentuknya sama dengan punya parent cuma dia itu tiruannya, alias semacam nge-copy dari parent. Karena nge-copy berarti dia merupakan scope yang berbeda dengan yang dimiliki oleh parent. Hal ini menyebabkan perubahan scope di directive tidak akan berpengaruh di parent.

Untuk menggunakan child scope kita menggunakan properti scope dengan nilai true pada objek directive.

app.directive('myDirective',function(){
  return {
    scope : true,
    restrict : 'EA',
    template : '<h2>Hello {{dunia}}</h2>',
    replace : true,
    link : function(scope,elem,attrs){
      elem.bind('click',function(){
        scope.dunia='Saya diklik';
        scope.$digest();
      });
    }
  };
});

Sekarang coba jalankan kembali dan klik sekali lagi pada directive. Kali ini perubahan hanya terjadi pada bagian directive (bagian sebelah bawah).

"directive"

2.2.2 Isolated Scope

Sesuai dengan namanya, isolated scope berarti scope yang sifatnya terisolasi, berlaku hanya di area directive, tidak merembet sampai parent. Kalau child scope tadi tidak mempengaruhi parent juga tetapi dia bentuknya merupakan kopian dari parent, isolated scope harus kita definisikan tersendiri untuk bisa digunakan.

Mari kita ubah kode directive sebelumnya dengan mengubah scope yang semula child scope menjadi isolated scope. Untuk mendefiniskan isolated scope kita menggunakan properti scope yang berupa objek.

app.directive('myDirective',function(){
  return {
    scope : {

    },
    restrict : 'EA',
    template : '<h2>Hello {{dunia}}</h2>',
    replace : true,
    link : function(scope,elem,attrs){
      elem.bind('click',function(){
        scope.dunia='Saya diklik';
        scope.$digest();
      });
    }
  };
});

Di atas kita membuat isolated scope yang bernilai kosong, nanti akan kita isi dan bagaimana contoh penggunaanya.

Sekarang coba jalankan lagi contoh aplikasi kita. Kali ini bagian directive tidak bisa membaca variabel dunia yang ada pada scope. Kejadian ini disebabkan karena kita menggunakan isolated scope, jadi directive tidak mengenali scope selain yang ada di isolated scope.

"directive"

Sekarang pertanyaannya bagaimana directive bisa menggunakan isolated scope?. Mungkin pembaca akan mengira-ngira dengan seperti ini definisikan variabel di dalam objek scope dan kasih nilainya, seperti berikut.

app.directive('myDirective',function(){
  return {
    scope : {
      dunia : 'Halo Saya Isolated Scope'
    },
    …
    …
    …
  };
});

Namun setelah kode diatas ditulis dan dieksekusi maka tidak berjalan seperti yang kita inginkan haha. Ya karena memang bukan seperti itu cara menggunakan isolated scope. Pun misal cara di atas bisa maka data variabel akan menjadi hard code.

Sub bab selanjutnya saya tulis untuk membahas masalah cara melakukan binding antara isolated scope dengan parent scope sehingga kita bisa menaruh sebuah nilai pada isolated scope.

2.2.3 Binding Antara Parent Scope dengan Isolated Scope

Seperti sudah saya singgung pada sub bab berikutnya, kita tidak bisa mendefiniskan isolated scope dengan serta-merta langsung diisi nilanya. Akan tetapi, kita bisa mengisi nilai yang ada pada variabel di isolated scope dengan nilai yang berasal dari variabel di luarnya (parent scope).

Ada 2 cara untuk memberi nilai pada isolated scope yaitu menggunakan :

  1. @ untuk one way text binding
  2. = untuk two way binding

Mari kita bahas satu demi satu 2 cara di atas.

@ untuk one way text binding

Diberi nama seperti itu karena dengan cara ini nilai yang dikirim ke isolated scope berasal dari parent scope tetapi tidak bisa berlaku kebalikan (nilai di-isolated scope tidak akan mempengaruhi parent scope).

Perhatikan contoh directive di bawah ini

app.directive('oneWay',function(){
  return {
    restrict:'E',
    scope:{
      title:'@'
    },
    template:'<h2>Title Inside : {{title}}</h2>',
    link : function(scope,elem,attrs){
      elem.bind('click',function(){
        scope.$apply(function() {
          scope.title = "JavaScript";
         });
      });
    }
  };
});

Nantinya kode di atas kan menampilkan pesan berupa Title Inside : {{inside}} dengan nilai variabel inside berasal dari luar / parent scope.

Kode html dan AngularJs di bawah ini menunjukkan bagaimana cara mengisi nilai variabel title yang ada pada isolated scope yang berasal dari parent scope.

<div ng-controller="MainController">
  <input type="text" ng-model="title"/> </br> </br>

  <one-way title="static"></one-way>      
  <one-way title="{{title}}"></one-way>
</div>

Tampilan awal ketika dijalankan sudah bisa pembaca tebak?, coba cocokkan perkiraan pembaca dengan screen shot berikut ini.

"directive"

Directive pertama akan menghasilkan teks Title Inside : static karena pada directive ini kita mem-passing nilai ke variabel inside dengan nilai static.

<one-way title="static"></one-way>

Sedangkan directive kedua akan kosong karena nilai yang kita passing adalah berupa teks yang didapat dari variabel title yang pada saat awal tidak bernilai.

Sekarang coba isi input teks yang ada dengan kata apapun, maka directive akan ikut berubah.

"direcitve"

Ngomong-ngomong, jika menggunakan @ untuk mem-passing variabel maka yang bisa di-passing hanyalah string, itu mengapa kita menggunakan ekspresi {{title}} saat mem-passing variabel title.

<one-way title="{{title}}"></one-way>

Terus masalah one way-nya sudah saya jelaskan pada bagian parent scope dan isolated scoped ya. Untuk mencobanya silahkan klik pada kedua directive maka title akan berubah menjadi JavaScipt tetapi variabel pada title yang ada pada inputan teks tidak berubah.

"directive"

= untuk two way binding

Perbedaan dengan menggunakan @ adalah

  1. Yang di-passing berupa object bukan string
  2. Perubahan scope di parent berpengaruh ke child dan berlaku sebaliknya

Dengan menggunakan contoh koding yang masih sama kita hanya perlu mengganti tanda dari @ menjadi =

app.directive('oneWay',function(){
  return {
    restrict:'E',
    scope:{
      title:'='
    },
    template:'<h2>Title Inside : {{title}}</h2>',
    link : function(scope,elem,attrs){
      elem.bind('click',function(){
        scope.$apply(function() {
          scope.title = "JavaScript";
         });
      });
    }
  };
});

Selain itu kita tidak lagi menggunakan ekspresi ( {{var}} ) saat mem-passing sebuah nilai. Perhatikan contoh di bawah ini pada HTML-nya.

<div ng-controller="MainController">
   <input type="text" ng-model="title"/> </br> </br>

  <one-way title="title"></one-way>
</div>

Ketika diklik parent akan ikut berubah

"directive"

Pembaca pasti sudah berkali-kali melihat dari beberapa contoh di atas terdapat properti link pada directive yang berupa fungsi. Saya juga yakin pembaca sudah mengerti apa kegunaannya.

link digunakan untuk melakukan utilisasi terhadap scope. Bahasa gampangnya, kalau mau ngapa-ngapain scope misal mengubah nilainya ya gunakan link.

link memiliki 3 buah parameter yaitu :

  1. scope – scope yang ada pada directive
  2. elem – elemen dari directive, digunakan untuk manipulasi DOM
  3. attrs – attribute dari directive

Jika mau mengubah nilai variabel pada scope maka gunakan parameter scope untuk mengubahnya, misal ada variabel dengan nama title yang ingin diubah maka kode berikut diperlukan.

scope.title = "Nilai baru";

Nilai scope tidak akan berubah kalau tidak ada apa-apa. Masa iya tiba-tiba nilai bisa berubah? Pasti tidak kan?. Paling sering, suatu nilai berubah pada saat ada event klik. Untuk mengakomodasi hal seperti itu digunakanlah parameter elem.

Misal kita ingin memberi nilai baru pada title ketika ada klik pada directive, maka gunakan elem supaya bereaksi ketika diklik. elem adalah jQLite (subset dari jQuery) jadi cara penggunaanya sama saja dengan jQuery untuk melakukan manipulasi DOM.

link : function(scope,elem,attrs){
  elem.bind('click',function(){
    scope.$apply(function() {
      scope.title = "Nilai baru";
    });
  });
}

Click adalah hanya sebagian dari event yang bisa digunakan di sini, untuk event apa saja yang ada silahkan merujuk ke dokumentasi resmi dari jQuery atau googling.

Diperhatikan secara seksama maka pembaca akan menemukan kode yang sedikit aneh yaitu adanya scope.$apply, apa kegunaannya? Sabar dulu ya nanti pada bab mendatang akan saya bahas juga. Pokoknya untuk sekarang cukup tahu kegunaan dari link dan cara menggunakan parameter-parameter yang dimilikinya :)

2.4 Demo Directive

Setelah melewati perjalanan yang cukup menyita energi untuk belajar directive melalui subbab – subbab sebelumnya, yok sekarang mari kita coba untuk mengimplementasikan apa yang telah kita pelajari dengan membuat sebuah directive yang pantas digunakan di real world project.

Tujuan utama dari directive yang akan kita buat adalah untuk menampilkan data tertentu dalam bentuk tabel yang bisa digunakan berulang kali. Di ASP.NET hal seperti ini disebut partial view. Di Ruby on Rails disebut partial render.

Langkah pertama seperti biasa buat module dan pasang di HTML-nya dan kemudian buat controller dan juga pasang di HTML. Jangan lupa untuk menyertakan file .js.

var app=angular.module('MyApp',[]);

<!DOCTYPE html> 
<html> 
<head> 
    <title>Demo Latihan Directive</title> 
</head> 
<body ng-app="MyApp"> 

  <div ng-controller="MainController"> 
    {{judul}} 
    <hr/> 

  </div> 
  <script src="js/angular.min.js"></script> 
  <script src="js/app.js"></script> 
  <script src="js/controllers/MainController.js"></script> 
  <script src="js/directives/AgsTable.js"></script> 
</body> 
</html>

Berikut adalah kode awal yang ada di controller.

app.controller('MainController', ['$scope', function($scope){ 
    $scope.judul='Demo Penggunaan AngularJs Directive'; 
}]);

Jalankan pada browser dan pastikan tulisan Demo Penggunaan AngularJs Directive muncul.

Langkah selanjutnya adalah membuat directive yang menggunakan template berupa file HTML.

PERHATIAN, untuk bisa menggunakan template yang berupa halaman HTML, kita harus menjalankan aplikasi AngularJs melalui web server, semisal Apache.

Kode di bawah ini merupakan directive kita.

app.directive('agsTable',function(){ 
  return { 
    restrict:'E', 
    scope:{ 
        books:'=' 
    }, 
    templateUrl:'js/directives/AgsTable.html' 
  }; 
});

Adapaun file HTML yang kita jadikan sebagai template yang bisa digunakan berulang kali bisa dilihat di bawah ini. 

<head> 
    <style type="text/css"> 
      .table{ 
        border-collapse: collapse; 
      } 

      tr,td,th{ 
        border: 1px solid #000; 
        padding: 5px; 
      } 

      td{ 
          width: 300px; 
      } 

      .number{ 
          text-align: right; 
      } 
    </style> 
</head> 

<table class="table"> 
  <tr> 
    <th>Judul</th> 
    <th>Penulis</th> 
    <th>Rating</th> 
  </tr> 

  <tr ng-repeat="b in books"> 
    <td>{{b.judul}}</td> 
    <td>{{b.penulis}}</td> 
    <td class="number">{{b.rating}}</td> 
  </tr> 
</table>

Kembali lagi ke controller. Tambahkan sebuah variabel bernama books yang menampung data beberapa buku, usahakan minimal 3 ya.

app.controller('MainController', ['$scope', function($scope){ 
    $scope.judul='Demo Penggunaan AngularJs Directive'; 

    $scope.books=[ 
      { 
          'judul':'Ayah', 
          'penulis':'Andrea Hirata', 
          'rating':4 
      }, 
      { 
          'judul':'Eragon', 
          'penulis':'Christoper Paolini', 
          'rating':3 
      }, 
      { 
          'judul':'Blink', 
          'penulis':'Malcolm Gladwell', 
          'rating':3 
      }, 
    ]; 
}]);

Sip kalau bisa mengikuti sampai sini. Langkah terakhir adalah memasukkan data books yang ada di controller ke dalam directive. Pasti bisa dong?, kalau belum bisa coba pahami lagi pada subbab sebelumnya. Kalau sudah yakin bisa coba cocokkan dengan kode berikut ini.

<div ng-controller="MainController"> 
  {{judul}} 
  <hr/> 
  <ags-table books="books"></ags-table> 
</div>

Jika pembaca bingung mengikuti bagaimana struktur foldernya, di bawah ini saya sertakan struktur folder dari pekerjaan di atas.

"struktur folder"

Selesai sudah utak-atik kita untuk membuat directive. Buka file index.html di browser maka seharusnya yang pembaca lihat adalah seperti pada gambar di bawah.

"directive"

Manfaat dari penggunaan directive ini adalah jika pada bagian lain dari aplikasi kita ingin menampilkan data buku yang memiliki format yang sama dengan isi yang berbeda maka kita tinggal mengganti scope books dengan data yang lain. Misalnya gini, di halaman depan dimunculkan buku-buku yang baru terbit, sedangkan di halaman lain dimunculkan buku-buku yang menduduki rangking 1 – 10.

"directive"

Sampai sini maka berakhir sudah pelajaran kita mengenai directive pada AngularJs. Saya yakin pasti masih banyak hal yang harus dipelajari lebih lanjut di directive. Mari sama-sama terus belajar :)