Table of Content
- Introduction
- Membuat Directive Baru
- Directive Kosong
- Mengambil Nilai Dari Controller
- Membuat List di Directive
- Controller Dalam Directive
- Memanggil Halaman Lain Dengan Directive
Introduction
Dikutip dari website resminya, Directive adalah penanda pada sebuah elemen DOM html yg menunjukan pada HTML Compiler buatan AngularJS yg berfungsi untuk memasang sebuah tindakan pada elemen DOM misalnya melalui event listener. Directive ini bekerja pada DOM HTML untuk memodifikasi, mengambil nilai, menciptakan elemen baru dan lain-lain.
Membuat Directive Baru
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script>
angular.module('belajar',[]).directive('tampil', function(){
return {
template : 'Directive Tampil'
}
})
</script>
</head>
<body ng-app="belajar">
<h1>Latihan AngularJS</h1>
<p tampil></p>
</body>
</html>Directive Kosong
Dibuat supaya directive lebih fleksibel digunakan.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script>
angular.module('belajar',[]).directive('tampil', function(){
return function(scope,element,attr){
element.text(attr.tampil)
}
})
</script>
</head>
<body ng-app="belajar">
<h1>Latihan AngularJS</h1>
<p tampil="Haloooo"></p>
</body>
</html>Mengambil Nilai Dari Controller
Nilai dari directive dapat juga diambil dari controller. Logikanya adalah nilai dari controller diambil oleh directive.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script>
app = angular.module('belajar',[]);
app.controller('kontroler', function($scope){
$scope.pesan = 'Ini dari controller!'
})
app.directive('pesan', function(){
return function(scope,element){
element.text(scope.pesan)
}
})
</script>
</head>
<body ng-app="belajar">
<h1>Latihan AngularJS</h1>
<div ng-controller="kontroler">
<p pesan></p>
</div>
</body>
</html>Note : untuk lebih ringkas silahkan dipisah script angular ke 1 file saja. misal script.js
Membuat List di Directive
script.js
let app = angular.module('belajar',[]);
app.directive('daftarPesan', function(){
return {
link: function(scope,element,attr){
scope.pesan = attr.daftarPesan.split(' ')
},
template: '<li ng-repeat="psn in pesan">{{ psn }}</li>'
}
})index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="belajar">
<h1>Latihan AngularJS</h1>
<p daftar-pesan="andaru triadi keren banget"></p>
</body>
</html>Note : perhatikan split(”), jangan lupa untuk di spasi seperti ini split(’ ‘)
Controller Dalam Directive
script.js
let app = angular.module('belajar',[]);
app.directive('tampil', function(){
return {
template: '<b>{{ tampil }}</b>',
controller: function($scope){
$scope.tampil = 'Controller dalam directive'
}
}
})index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="belajar">
<h1>Latihan AngularJS</h1>
<p tampil></p>
</body>
</html>Memanggil Halaman Lain Dengan Directive
script.js
let app = angular.module('belajar',[]);
app.directive('linku', function(){
return {
templateUrl: 'index2.html'
}
})index2.html
<h2>Ini halaman index 2</h2>index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="belajar">
<h1>Latihan AngularJS</h1>
<div linku></div>
</body>
</html>