Passing Data ke Custom Directive pada AngularJS

Lagi belajar passing data ke custom directive di AngularJS. Cara-nya mudah banget, bisa lihat kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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 my-directive
    my-url="http://google.com"
    my-link-text="Click me"></div>
 
</body>
<script>
angular.module('myApp', [])
.directive('myDirective', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      myUrl: '@',
      myLinkText: '@'
    },
    template: '<a href="{{myUrl}}">{{myLinkText}}</a>'
  };
});
</script>
</html>

[demo]

Pada kode diatas saya buat directive sendiri, lalu passing data dari html ke directive itu sendiri yaitu myUrl dan myLinkText. Directive yang kita buat harus mengeluarkan object sesuai settingan dari AngularJS. Restrict maksudnya adalah pembatasan directive terpasang, replace maksudnya adalah apa template yang kita buat menimpa html atau tidak dan template adalah hasil keluaran dari directive yang kita buat.

Kita pun dapat menambahkan data lain misalnya alt seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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 my-directive
    my-url="http://google.com"
    my-link-text="Click me" my-alt-text="Google"></div>
 
</body>
<script>
angular.module('myApp', [])
.directive('myDirective', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      myUrl: '@',
      myLinkText: '@',
      myAltText:'@'
    },
    template: '<a href="{{myUrl}}" alt="{{myAltText}}">{{myLinkText}}</a>'
  };
});
</script>
</html>

[demo]

Leave a Reply

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

%d bloggers like this: