Mengenal Transclude Custom Directive pada AngularJS

Transclude salah satu option custom Directive yang unik di AngularJS. Dengan option ini kita kaya buat template static yang bisa dipakai lagi dan lagi. Contohnya gini, saya buat list link seperti dibawah ini.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>

<div sidebox title="Links">
  <ul>
  <li>First link</li>
  <li>Second link</li>
  </ul>
</div>
 
</body>
</html>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
angular.module('myApp', [])
.directive('sidebox', function() {
  return {
    restrict: 'A',
    scope: {
      title: '@'
    },
    transclude: true,
    template: '<div class="sidebox">\
                <div class="content">\
                  <h2 class="header">{{ title }}</h2>\
                    <span class="content" ng-transclude>\
                    </span>\
                </div>\
              </div>'

  };
});

[demo]

Kalau dijalankan dan kita inspect element akan terlihat html seperti dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
<div sidebox="" title="Links" class="ng-isolate-scope ng-scope">
  <div class="sidebox">
    <div class="content">
      <h2 class="header ng-binding">Links</h2>
      <span class="content" ng-transclude="">
        <ul class="ng-scope">
          <li>First link</li>
          <li>Second link</li>
        </ul>
      </span>
    </div>
  </div>
</div>

Itulah uniknya Transclude option pada Directive. Kita cukup menambahkan ng-transclude pada template keluaran.
Kita bisa menambahkan list lagi dengan directive ‘sidebox’ tersebut seperti kode dibawah ini.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>

<div sidebox title="Links">
  <ul>
  <li>First link</li>
  <li>Second link</li>
  </ul>
</div>
 
<div sidebox title="Reference">
  <ul>
  <li>First Reff link</li>
  <li>Second Reff link</li>
  </ul>
</div>
 
</body>
</html>

Dengan keluaran yang sama seperti contoh diatas.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: