Direktif CUSTOM di AngularJS: Bagaimana Cara Membuatnya? [Contoh]
James Hartman
Apa itu Petunjuk Khusus?
A Petunjuk Khusus dalam AngularJS adalah direktif yang ditentukan pengguna yang memungkinkan pengguna menggunakan fungsi yang diinginkan untuk memperluas fungsionalitas HTML. Direktif ini dapat didefinisikan dengan menggunakan fungsi “directive”, dan menggantikan elemen yang digunakan. Meskipun AngularJS memiliki banyak direktif yang hebat, terkadang direktif khusus diperlukan.
Bagaimana Cara Membuat Petunjuk Khusus?
Mari kita lihat contoh bagaimana kita dapat membuat direktif kustom AngularJS.
Direktif khusus dalam kasus kita hanya akan memasukkan tag div yang memiliki teks "Tutorial AngularJS" di halaman kita saat direktif tersebut dipanggil.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp">
<div ng-guru=""></div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.directive('ngGuru',function(){
return {
template: '<div>Angular JS Tutorial</div>'
}
});
</script>
</body>
</html>
Code Penjelasan
- Kami pertama kali membuat a modul untuk aplikasi sudut kita. Ini diperlukan untuk membuat direktif khusus karena direktif akan dibuat menggunakan modul ini.
- Sekarang kita sedang membuat direktif khusus yang disebut “ng”Guru” dan mendefinisikan sebuah fungsi yang akan memiliki kode khusus untuk arahan kita.Catatan: - Perhatikan bahwa saat mendefinisikan direktif, kita telah mendefinisikannya sebagai ng.Guru dengan huruf 'G' sebagai huruf kapital. Dan ketika kita mengaksesnya dari tag div kita sebagai directive, kita mengaksesnya sebagai ng-guru. Beginilah cara Angular memahami directive kustom yang didefinisikan dalam sebuah aplikasi. Pertama, nama directive kustom harus dimulai dengan huruf 'ng'. Kedua, simbol tanda hubung '-' hanya boleh disebutkan saat memanggil directive. Dan ketiga, huruf pertama setelah huruf 'ng' saat mendefinisikan directive dapat berupa huruf kecil atau huruf besar.
- Kami menggunakan parameter templat yang merupakan parameter yang ditentukan oleh Angular untuk arahan khusus. Dalam hal ini, kami mendefinisikan bahwa setiap kali direktif ini digunakan, gunakan saja nilai templat dan masukkan ke dalam kode panggilan.
- Di sini kita sekarang menggunakan arahan “ng-guru” yang dibuat khusus. Saat kami melakukan ini, nilai yang kami tetapkan untuk template kami “ Tutorial JS Sudut ” sekarang akan disuntikkan di sini.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Output di atas dengan jelas memperlihatkan bahwa direktif ng-guru kustom kita, yang memiliki templat yang ditetapkan untuk menampilkan teks kustom, ditampilkan di browser.
Arahan dan Cakupan AngularJs
Ruang lingkup didefinisikan sebagai perekat yang mengikat pengontrol ke tampilan dengan mengelola data antara tampilan dan pengontrol.
Saat membuat arahan AngularJs khusus, mereka secara default akan memiliki akses ke objek cakupan di pengontrol induk.
Dengan cara ini, arahan khusus menjadi mudah untuk memanfaatkan data yang diteruskan ke pengontrol utama.
Mari kita lihat contoh direktif kustom AngularJS tentang bagaimana kita dapat menggunakan cakupan pengontrol induk dalam direktif kustom kita.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div ng-guru=""></div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope) {
$scope.tutorialName = "Angular JS";
});
app.directive('ngGuru',function(){
return {
template: '<div>{{tutorialName}}</div>'
}
});
</script>
</body>
</html>
Code Penjelasan
- Pertama-tama kita membuat pengontrol bernama, “DemoController”. Dalam hal ini, kita mendefinisikan variabel bernama tutorialName dan melampirkannya ke objek cakupan dalam satu pernyataan – $scope.tutorialName = “AngularJS”.
- Dalam arahan khusus kami, kami dapat memanggil variabel "tutorialName" dengan menggunakan ekspresi. Variabel ini dapat diakses karena didefinisikan dalam pengontrol “DemoController”, yang akan menjadi induk dari direktif ini.
- Kami mereferensikan pengontrol dalam tag div, yang akan bertindak sebagai tag div induk kami. Perhatikan bahwa ini perlu dilakukan terlebih dahulu agar direktif khusus kita dapat mengakses variabel tutorialName.
- Kami akhirnya hanya melampirkan arahan khusus kami “ng-guru” ke tag div kami.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Output di atas dengan jelas menunjukkan bahwa direktif khusus kita “ng-guru” menggunakan variabel cakupan tutorialName di pengontrol induk.
Menggunakan pengontrol dengan arahan
Angular memberikan fasilitas untuk mengakses variabel anggota pengontrol langsung dari arahan khusus tanpa perlu objek lingkup.
Hal ini terkadang diperlukan karena dalam suatu aplikasi Anda mungkin memiliki beberapa objek cakupan yang dimiliki oleh beberapa pengontrol.
Jadi ada kemungkinan besar Anda membuat kesalahan dengan mengakses objek lingkup pengontrol yang salah.
Dalam skenario seperti itu, ada cara untuk secara spesifik menyebutkan "Saya ingin mengakses pengontrol khusus ini" dari arahan saya.
Mari kita lihat contoh bagaimana kita dapat mencapai hal ini.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div ng-guru99=""></div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function() {
this.tutorialName = "Angular";
});
app.directive('ngGuru99',function(){
return {
controller: 'DemoController',
controllerAs: 'ctrl',
template: '{{ctrl.tutorialName}}'
};
});
</script>
</body>
</html>
Code Penjelasan
- Pertama-tama kita membuat pengontrol bernama, “DemoController”. Dalam hal ini kita akan mendefinisikan sebuah variabel bernama "tutorialName" dan kali ini alih-alih melampirkannya ke objek cakupan, kita akan melampirkannya langsung ke pengontrol.
- Dalam arahan khusus kami, kami secara khusus menyebutkan bahwa kami ingin menggunakan pengontrol “DemoController” dengan menggunakan kata kunci parameter pengontrol.
- Kami membuat referensi ke pengontrol menggunakan parameter “controllerAs”. Ini didefinisikan oleh Angular dan merupakan cara untuk mereferensikan pengontrol sebagai referensi.
- Terakhir, dalam template kita, kita menggunakan referensi yang dibuat pada langkah 3 dan menggunakan variabel anggota yang dilampirkan langsung ke pengontrol pada Langkah 1.
Catatan: -Dimungkinkan untuk mengakses beberapa pengontrol dalam sebuah arahan dengan menentukan blok masing-masing dari pernyataan controller, controllerAs, dan template.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Outputnya dengan jelas menunjukkan bahwa arahan khusus secara khusus mengakses DemoController dan variabel anggota tutorialName yang dilampirkan padanya dan menampilkan teks “Angular”.
Cara membuat arahan yang dapat digunakan kembali
Kita sudah melihat kekuatan arahan khusus, namun kita dapat membawanya ke tingkat berikutnya dengan membangun arahan kita sendiri yang dapat digunakan kembali.
Katakanlah, misalnya, kita ingin memasukkan kode yang akan selalu menampilkan tag HTML di bawah ini di beberapa layar, yang pada dasarnya hanyalah masukan untuk “Nama” dan “usia” pengguna.
Untuk menggunakan kembali fungsi ini di beberapa layar tanpa mengkode setiap saat, kami membuat kontrol master atau arahan dalam sudut untuk menampung kontrol ini (“Nama” dan “usia” pengguna).
Jadi sekarang, daripada memasukkan kode yang sama untuk layar di bawah ini setiap saat, kita sebenarnya dapat menyematkan kode ini dalam sebuah arahan dan menyematkan arahan itu kapan saja.
Mari kita lihat contoh bagaimana kita dapat mencapai hal ini.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp">
<div ng-guru=""></div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.directive('ngGuru',function(){
return {
template: ' Name <input type="text"><br><br> Age<input type="text">'
};
});
</script>
</body>
</html>
Code Penjelasan
- Dalam cuplikan kode kita untuk direktif kustom, apa yang berubah hanyalah nilai yang diberikan pada parameter template direktif kustom kita. Alih-alih tag atau teks rencana lima, kita sebenarnya memasukkan seluruh fragmen dari 2 kontrol input untuk “ Nama” dan “usia” yang perlu ditampilkan di halaman kami.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Dari keluaran di atas, kita dapat melihat bahwa cuplikan kode dari templat arahan khusus ditambahkan ke halaman.
Arahan dan komponen AngularJS – ng-transklusi
Seperti yang kami sebutkan sebelumnya, Angular dimaksudkan untuk memperluas fungsionalitas HTML. Dan kita telah melihat bagaimana kita dapat melakukan injeksi kode dengan menggunakan arahan khusus yang dapat digunakan kembali.
Namun dalam pengembangan aplikasi web modern, ada juga konsep pengembangan.ping Komponen web. Yang pada dasarnya berarti membuat tag HTML kita sendiri yang dapat digunakan sebagai komponen dalam kode kita.
Oleh karena itu, sudut memberikan tingkat kekuatan lain untuk memperluas tag HTML dengan memberikan kemampuan untuk memasukkan atribut ke dalam tag HTML itu sendiri.
Hal ini dilakukan oleh “ng-transklusikan” tag, yang merupakan semacam pengaturan untuk memberi tahu sudut agar menangkap segala sesuatu yang dimasukkan ke dalam arahan di markup.
Mari kita ambil contoh bagaimana kita dapat mencapai hal ini.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp">
<pane title="{{title}}">Angular JS</pane>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.directive('pane',function(){
return {
transclude:true,
scope :{title:'@'},
template: '<div style="border: 1px solid black;"> '+
'<ng-transclude></ng-transclude>'+
'</div>'
};
});
</script>
</body>
</html>
Code Penjelasan
- Kami menggunakan arahan untuk mendefinisikan tag HTML khusus yang disebut 'pane' dan menambahkan fungsi yang akan memasukkan beberapa kode khusus untuk tag ini. Pada output, tag panel kustom kami akan menampilkan teks “AngularJS” dalam persegi panjang dengan batas hitam pekat.
- Atribut "transclude" harus disebutkan sebagai benar, yang diperlukan oleh sudut untuk memasukkan tag ini ke DOM kami.
- Dalam cakupannya, kami mendefinisikan atribut title. Atribut biasanya didefinisikan sebagai pasangan nama/nilai seperti: nama=”nilai”. Dalam kasus kami, nama atribut di tag HTML panel kami adalah “judul”. Simbol “@” adalah persyaratan dari sudut. Hal ini dilakukan agar ketika baris title={{title}} dijalankan pada Langkah 5, kode khusus untuk atribut title akan ditambahkan ke tag HTML panel.
- Kode khusus untuk atribut judul yang hanya menggambar batas hitam pekat untuk kendali kami.
- Terakhir, kami memanggil tag HTML khusus kami bersama dengan atribut title yang telah ditentukan.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
- Outputnya dengan jelas menunjukkan bahwa atribut title dari tag html5 panel telah disetel ke nilai khusus “Angular.JS”.
Arahan bersarang
Arahan di AngularJS dapat disarangkan. Seperti modul atau fungsi bagian dalam saja bahasa pemrograman, Anda mungkin perlu menyematkan arahan satu sama lain.
Anda dapat memperoleh pemahaman yang lebih baik tentang hal ini dengan melihat contoh di bawah ini.
Dalam contoh ini, kita membuat 2 arahan yang disebut “luar” dan “dalam”.
- Arahan dalam menampilkan teks yang disebut "Batin".
- Sedangkan direktif luar justru memanggil direktif dalam untuk menampilkan teks yang disebut “Inner”.
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp">
<outer></outer>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.directive('outer',function(){
return {
restrict:'E',
template: '<div><h1>Outer</h1><inner></inner></div>',
}});
app.directive('inner',function(){
return {
restrict:'E',
template: '<div><h1>Inner</h1></div>',
}
});
</script>
</body>
</html>
Code Penjelasan
- Kami membuat arahan yang disebut "luar" yang akan berperilaku seperti arahan induk kami. Arahan ini kemudian akan memanggil arahan “dalam”.
- Pembatasan:'E' diperlukan oleh sudut untuk memastikan bahwa data dari direktif dalam tersedia untuk direktif luar. Huruf 'E' merupakan kependekan dari kata 'Element'.
- Di sini kita membuat direktif inner yang menampilkan teks “Inner” dalam tag div.
- Dalam templat untuk direktif luar (langkah#4), kita memanggil direktif dalam. Jadi di sini kita memasukkan template dari direktif dalam ke direktif luar.
- Terakhir, kami secara langsung memanggil arahan luar.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Dari keluarannya,
- Dapat dilihat bahwa direktif luar dan dalam telah dipanggil, dan teks dalam kedua tag div ditampilkan.
Menangani peristiwa dalam arahan
Events klik mouse atau klik tombol tersebut dapat ditangani dari dalam arahan itu sendiri. Ini dilakukan dengan menggunakan fungsi tautan. Fungsi link inilah yang memungkinkan arahan untuk melampirkan dirinya ke elemen DOM di halaman HTML.
sintaks:
Sintaks elemen link seperti gambar di bawah ini
link: function ($scope, element, attrs)
Fungsi link biasanya menerima 3 parameter termasuk cakupan, elemen yang dikaitkan dengan arahan, dan atribut elemen target.
Mari kita lihat contoh bagaimana kita dapat mencapai hal ini.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp">
<div ng-guru="">Click Me</div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.directive('ngGuru',function(){
return {
link:function($scope,element,attrs) {
element.bind('click',function () {
element.html('You clicked me');
});}
}});
</script>
</body>
</html>
Code Penjelasan
- Kami menggunakan fungsi tautan seperti yang didefinisikan dalam sudut untuk memberikan kemampuan arahan untuk mengakses acara di DOM HTML.
- Kami menggunakan kata kunci 'elemen' karena kami ingin merespons peristiwa untuk elemen HTML DOM, yang dalam kasus kami adalah elemen “div”. Kami kemudian menggunakan fungsi "bind" dan mengatakan bahwa kami ingin menambahkan fungsionalitas khusus ke acara klik elemen. Kata 'klik' adalah kata kunci, yang digunakan untuk menunjukkan peristiwa klik pada kontrol HTML apa pun. Misalnya, kontrol tombol HTML memiliki event klik. Karena, dalam contoh kita, kita ingin menambahkan kode khusus ke peristiwa klik pada tag “dev”, kita menggunakan kata kunci 'klik'.
- Di sini kami mengatakan bahwa kami ingin mengganti HTML bagian dalam elemen (dalam kasus kami elemen div) dengan teks 'Anda mengklik saya!'.
- Di sini kita mendefinisikan tag div untuk menggunakan direktif khusus ng-guru.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
- Awalnya teks 'Klik Saya' akan ditampilkan kepada pengguna karena inilah yang awalnya didefinisikan dalam tag div. Ketika Anda mengklik tag div, output di bawah ini akan ditampilkan
Ringkasan
- Seseorang juga dapat membuat arahan khusus yang dapat digunakan untuk memasukkan kode ke dalam aplikasi sudut utama.
- Arahan khusus dapat dibuat untuk memanggil anggota yang ditentukan dalam objek cakupan di pengontrol tertentu dengan menggunakan kata kunci 'Controller', 'controllerAs' dan 'template'.
- Arahan juga dapat disarangkan untuk menyediakan fungsionalitas tertanam yang mungkin diperlukan tergantung pada kebutuhan aplikasi.
- Direktif juga dapat dibuat dapat digunakan kembali sehingga dapat digunakan untuk memasukkan kode umum yang mungkin diperlukan di berbagai aplikasi web.
- Arahan juga dapat digunakan untuk membuat tag HTML khusus yang fungsinya sendiri ditentukan sesuai kebutuhan bisnis.
- Peristiwa juga dapat ditangani dari dalam arahan untuk menangani peristiwa DOM seperti klik tombol dan mouse.
