Direktif Kustom AngularJS: Template, Scope & Transclude

Apa itu Custom Directive di AngularJS?

A Petunjuk Khusus Di AngularJS, `@Directive` adalah sebuah directive yang didefinisikan pengguna yang memperluas HTML dengan perilaku yang Anda tulis sendiri. Directive ini didaftarkan pada sebuah objek. modul dengan menggunakan fungsi “directive”, dan AngularJS akan melampirkannya di mana pun elemen atau atribut yang sesuai muncul di halaman. Meskipun AngularJS memiliki banyak fitur yang ampuh arahan bawaan langsung dari kotak, seperti ng-ulangiTerkadang, arahan khusus diperlukan.

⚠️ Koreksi: Teks aslinya menyatakan bahwa sebuah directive kustom "menggantikan elemen yang digunakannya". Secara default, hal itu tidak terjadi: template dimasukkan dalam Elemen yang cocok. Kebutuhan penggantian replace: true, sudah usang sejak AngularJS 1.3.

⚠️ Pemberitahuan dukungan: AngularJS telah mencapai akhir hayat pada 31 Desember 2021 dan tidak menerima patch atau perbaikan keamanan lebih lanjut. Semua hal di bawah ini tetap akurat untuk memelihara kode AngularJS 1.x yang ada; di Angular modern, padanannya adalah komponen dan direktif atribut.

Alasan untuk menggunakan directive kustom adalah pengulangan. Ketika markup atau konfigurasi DOM yang sama muncul di beberapa layar, directive akan mengubahnya menjadi satu tag bernama.

Bagaimana Cara Membuat Petunjuk Khusus?

Mari kita lihat contoh bagaimana kita dapat membuat directive kustom AngularJS.

Dalam kasus ini, directive kustom yang kita gunakan hanya akan menyisipkan tag div yang berisi teks "Angular JS Tutorial" ke halaman kita saat directive tersebut dipanggil.

Tangkapan layar beranotasi di bawah ini memberi nomor pada empat bagian daftar yang dijelaskan setelahnya.

<!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>

⚠️ Peringatan — cacat tetap tercantum dalam daftar ini: Kode tersebut direproduksi persis seperti yang dipublikasikan. Tiga kesalahan berulang di setiap daftar di sini: chrset="UTF 8" seharusnya charset="UTF-8"; angular.js ke angular.min.js keduanya dimuat, jadi AngularJS dimuat dua kali; dan angular-route.js memuat sebelum file yang menjadi ketergantungannya.

Code Penjelasan

1. Kami pertama kali membuat a modul untuk aplikasi AngularJS kami. Ini diperlukan untuk membuat directive kustom karena directive akan dibuat menggunakan modul ini.
2. Sekarang kita sedang membuat direktif khusus yang disebut “ng”Guru” dan mendefinisikan fungsi pabrik yang akan menyimpan kode kustom untuk arahan kita.
3. Kita menggunakan parameter template, yaitu parameter yang didefinisikan oleh AngularJS untuk directive kustom. Di sini, kita mendefinisikan bahwa setiap kali directive ini digunakan, maka cukup gunakan nilai dari template dan masukkan ke dalam kode pemanggil.
4. Di sini kita sekarang menggunakan direktif "ng-guru" yang telah kita buat sendiri. Saat kita melakukan ini, nilai yang telah kita definisikan untuk template kita, <div>Angular JS Tutorial</div>, sekarang akan disuntikkan di sini.

Penamaan dan Normalisasi Direktif

Ketidaksesuaian nama antara JavaScript dan HTML membingungkan sebagian besar pemula. AngularJS menormalkan setiap nama elemen dan atribut sebelum dicocokkan: ia menghapus semua yang diperlukan. x- or data- awalan, lalu mengkonversi nama yang dibatasi oleh -, : or _ menjadi camelCase. Itulah alasannya. ngGuru korek api ng-guru, dan mengapa data-ng-guru Itu juga bisa digunakan. Bentuk camelCase adalah nama sebenarnya; kebab-case hanyalah cara penulisannya dalam HTML.

⚠️ Koreksi: Teks aslinya menyatakan bahwa nama arahan khusus “harus diawali dengan huruf 'ng'”. Dokumentasi resmi AngularJS menyarankan sebaliknya: jangan pernah menambahkan awalan pada arahan Anda sendiri dengan ng, atau mungkin akan berbenturan dengan fitur bawaan di masa mendatang. Gunakan awalan Anda sendiri, seperti g99Guru ditulis sebagai g99-guru.

Jika kode berhasil dieksekusi, output berikut akan muncul.

Keluaran:

Outputnya jelas menunjukkan bahwa directive ng-guru kustom kita, yang memiliki template yang didefinisikan untuk menampilkan teks kustom, ditampilkan di browser. Langkah selanjutnya adalah memasukkan sesuatu yang layak digunakan kembali ke dalam template tersebut.

Cara Membuat Direktif 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.

Misalnya, kita ingin menyisipkan kode yang akan selalu menampilkan tag HTML di bawah ini di beberapa layar, yang pada dasarnya hanyalah input untuk "Nama" dan "umur" pengguna.

Untuk menggunakan kembali fragmen ini di beberapa layar tanpa perlu membuat kode setiap kali, kita membuat kontrol utama, atau direktif, di AngularJS untuk menampung kedua kontrol ini.

Jadi sekarang, alih-alih mengulang markup tersebut di setiap layar, kita menyematkannya dalam sebuah directive dan memanggil directive tersebut. Tangkapan layar di bawah ini menandai satu-satunya baris yang berubah.

<!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: '&nbsp;&nbsp;Name <input type="text"><br><br>&nbsp;&nbsp;&nbsp;Age<input type="text">'
        };
    });

</script>

</body>
</html>

Code Penjelasan

• Dalam cuplikan kode kita untuk sebuah directive kustom, yang berubah hanyalah nilai yang diberikan ke parameter template. Alih-alih tag biasa atau sebaris teks, kita memasukkan seluruh fragmen dari dua kontrol input untuk "Nama" dan "Usia" yang perlu ditampilkan di halaman kita.

💡 olymp trade indonesiaTip: Templat sepanjang ini sebaiknya disimpan dalam file tersendiri. Tukar template untuk templateUrl: 'name-age.html'.

Jika kode berhasil dieksekusi, output berikut akan muncul.

Keluaran:

Dari output di atas, kita dapat melihat bahwa cuplikan kode dari template directive kustom telah ditambahkan ke halaman. Template tersebut masih statis, jadi langkah selanjutnya adalah memasukkan data ke dalamnya.

Direktif dan Cakupan AngularJS

The cakupan didefinisikan sebagai perekat yang mengikat controller ke view dengan mengelola data antara view dan controller.

Saat membuat direktif AngularJS kustom, secara default direktif tersebut akan memiliki akses ke objek scope di controller induk. Ini adalah objek scope yang sama, bukan salinan.

Dengan cara ini, arahan khusus menjadi mudah untuk memanfaatkan data yang diteruskan ke pengontrol utama.

Mari kita lihat contoh bagaimana kita dapat menggunakan cakupan controller induk dalam directive kustom kita. Tangkapan layar di bawah ini memberi nomor pada keempat langkah tersebut.

<!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

1. Pertama, kita membuat controller bernama “DemoController”. Di dalamnya, kita mendefinisikan variabel bernama tutorialName dan melampirkannya ke objek scope dalam satu pernyataan: $scope.tutorialName = "Angular JS".
2. 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.
3. 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.
4. Kami akhirnya hanya melampirkan arahan khusus kami “ng-guru” ke tag div kami.

Jika kode berhasil dieksekusi, output berikut akan muncul.

Keluaran:

Output di atas jelas menunjukkan bahwa directive kustom kita “ng-guru” menggunakan variabel scope tutorialName di controller induk. Berbagi scope induk memang nyaman, tetapi tidak selalu sesuai dengan yang Anda inginkan.

Menggunakan Pengontrol dengan Petunjuk

AngularJS memberikan fasilitas untuk mengakses variabel anggota pengontrol langsung dari arahan khusus tanpa perlu objek lingkup.

Hal ini terkadang diperlukan karena sebuah aplikasi mungkin memiliki beberapa objek scope yang termasuk dalam beberapa controller, sehingga ada kemungkinan besar mengakses objek scope dari controller yang salah secara tidak sengaja.

Dalam skenario seperti itu, ada cara untuk secara spesifik mengatakan "Saya ingin mengakses controller ini" dari directive saya.

Mari kita lihat contoh bagaimana kita dapat mencapai hal ini. Tangkapan layar tersebut memberi nomor pada keempat langkah tersebut.

<!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

1. Pertama-tama kita membuat sebuah controller bernama “DemoController”. Di dalamnya kita akan mendefinisikan sebuah variabel bernama “tutorialName” dan kali ini, alih-alih melampirkannya ke objek scope, kita akan melampirkannya langsung ke controller tersebut.
2. Dalam arahan khusus kami, kami secara khusus menyebutkan bahwa kami ingin menggunakan pengontrol “DemoController” dengan menggunakan kata kunci parameter pengontrol.
3. Kita membuat referensi ke controller menggunakan parameter “controllerAs”. Ini didefinisikan oleh AngularJS dan merupakan cara untuk mereferensikan controller dengan alias.
4. Terakhir, dalam template kita, kita menggunakan referensi yang dibuat pada langkah 3 dan menggunakan variabel anggota yang dilampirkan langsung ke controller pada langkah 1.

Catatan: Dimungkinkan untuk mengakses beberapa controller dalam sebuah directive dengan menentukan blok controller masing-masing, controllerAs, dan pernyataan template. Untuk mencapai induk alih-alih menggunakan controller dari directive, gunakan... require.

Jika kode berhasil dieksekusi, output berikut akan muncul.

Keluaran:

Output tersebut dengan jelas menunjukkan bahwa directive kustom mengakses DemoController dan variabel anggota tutorialName yang terhubung dengannya, dan menampilkan teks "Angular". Kedua pendekatan tersebut masih membaca dari scope bersama, yang dicegah oleh scope terisolasi.

Perbedaan Pengikatan @, =, & dan < dalam Lingkup Terisolasi

Direktif yang berbagi cakupan induknya hanya dapat digunakan sekali per pengontrol, karena dua salinan akan berebut variabel yang sama. scope objek menciptakan sebuah ruang lingkup isolasiDirektif ini tidak melihat apa pun di luar kecuali properti yang Anda cantumkan. Setiap entri menggunakan simbol awalan yang menyatakan bagaimana nilainya diteruskan.

💡 olymp trade indonesiaTip: Jangkau < sebelum =Pengikatan satu arah lebih murah untuk dipantau dan mencegah komponen mengubah data pemanggilnya secara diam-diam. Bagian selanjutnya menggunakan @.

Direktif dan Komponen AngularJS: ng-transclude

Seperti yang telah kami sebutkan sebelumnya, AngularJS dimaksudkan untuk memperluas fungsionalitas dari 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, AngularJS memberikan tingkat kekuatan lain untuk memperluas tag HTML dengan memberikan kemampuan untuk membungkus markup apa pun yang dimasukkan oleh pemanggil ke dalam tag tersebut.

Hal ini dilakukan oleh “ng-transklusikanDirektif ”, yang memberi tahu AngularJS untuk menangkap semua yang dimasukkan ke dalam tag kustom di markup dan memasukkannya ke dalam template pada titik tersebut.

Mari kita ambil contoh bagaimana kita dapat mencapai hal ini. Tangkapan layar tersebut memberi nomor pada lima poin berikut.

<!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

1. Kami menggunakan directive untuk mendefinisikan tag HTML kustom bernama "pane", dengan fungsi factory yang menyediakan kodenya. Pada output, tag pane menampilkan teks "Angular JS" dalam persegi panjang dengan batas hitam pekat.
2. Properti “transclude” harus diatur ke true, yang memberi tahu AngularJS untuk mempertahankan markup internal asli dan membuatnya tersedia untuk ng-transclude.
3. Dalam objek scope, kita mendeklarasikan pengikatan judul. Atribut biasanya ditulis sebagai pasangan nama/nilai seperti name="value"Dalam kasus kita, atribut pada tag panel adalah "title", dan simbol "@" meminta AngularJS untuk menyalin atribut tersebut sebagai string yang diinterpolasi.
4. Templat tersebut menggambar garis batas hitam pekat untuk kontrol kita dan menandai tempat di mana markup yang disisipkan dimasukkan.
5. Terakhir, kita memanggil tag HTML kustom kita beserta atribut judul yang telah didefinisikan.

⚠️ Koreksi: Teks aslinya mendeskripsikan "@" sebagai "persyaratan dari Angular". Ini bukan sekadar formalitas: @ adalah salah satu dari empat simbol pengikatan lingkup terisolasi dalam tabel di atas dan selalu menghasilkan string. Templat ini juga tidak pernah merender {{title}}, dan tidak ada pengontrol yang mendefinisikan title, sehingga hanya teks yang disisipkan yang terlihat.

Jika kode berhasil dieksekusi, output berikut akan muncul.

Keluaran:

• Outputnya menunjukkan elemen panel kustom yang dirender sebagai kotak berbingkai yang berisi teks "Angular JS" yang disisipkan.

Suatu arahan juga dapat berisi arahan lain, yang merupakan cara komponen yang lebih besar dirakit.

Direktif Bersarang

Direktif di AngularJS dapat bersarang. Seperti modul atau fungsi internal dalam apa pun. 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”.

Tangkapan layar di bawah ini menandai kedua definisi arahan dan titik di mana satu memanggil yang lain.

</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>

⚠️ Peringatan — cacat tetap ada dalam daftar ini: Daftar yang dipublikasikan dimulai dari </head>, melewatkan pembukaannya <!DOCTYPE html>, <html> ke <head> baris. Tambahkan baris-baris tersebut sebelum menjalankannya.

Code Penjelasan

1. Kami membuat arahan yang disebut "luar" yang akan berperilaku seperti arahan induk kami. Arahan ini kemudian akan memanggil arahan “dalam”.
2. The restrict:'E' Opsi ini memberi tahu AngularJS untuk mencocokkan setiap direktif dengan elemen nama, itulah sebabnya mereka dapat ditulis sebagai tag. <outer> ke <inner>Huruf 'E' adalah kependekan dari kata 'Elemen'.
3. Di sini kita membuat direktif inner yang menampilkan teks “Inner” dalam tag div.
4. Dalam template untuk directive luar, kita memanggil directive dalam. Jadi di sini kita menyuntikkan template dari directive dalam ke dalam directive luar.
5. Terakhir, kami secara langsung memanggil arahan luar.

⚠️ Koreksi: Teks aslinya menyatakan restrict:'E' diperlukan “untuk memastikan bahwa data dari arahan dalam tersedia untuk arahan luar”. Hal itu tidak terjadi; itu hanya mengontrol. bagaimana Sebuah arahan dapat ditulis. Penggunaan penestingan berhasil karena kompiler terus masuk ke dalam templat yang baru saja disisipkan. Untuk berbagi data, gunakan... require ke controller.

Jika kode berhasil dieksekusi, output berikut akan muncul.

Keluaran:

Dari keluarannya,

• Terlihat bahwa baik direktif luar maupun dalam telah dipanggil, dan teks di kedua tag div tersebut ditampilkan.

Menampilkan markup hanyalah setengah dari fungsi sebuah directive; setengah lainnya adalah bereaksi terhadap pengguna.

Menangani Peristiwa dalam sebuah Direktif

Events Seperti klik mouse atau klik tombol, hal-hal tersebut dapat ditangani dari dalam direktif itu sendiri. Ini dilakukan dengan menggunakan fungsi link. Fungsi link inilah yang memungkinkan direktif untuk menempelkan dirinya ke elemen DOM dalam halaman HTML.

sintaks:

Sintaks fungsi tautan adalah seperti yang ditunjukkan di bawah ini.

link: function ($scope, element, attrs)

Fungsi tautan biasanya menerima 3 parameter: cakupan, elemen yang terkait dengan direktif, dan atribut elemen target. Dua parameter tambahan, pengontrol yang diperlukan dan fungsi transklusi, akan tersedia jika diperlukan.

Fase Kompilasi versus Fase Penautan

AngularJS memproses sebuah directive dalam dua tahap, dan mengetahui mana yang mana akan memberi tahu Anda di mana kode Anda seharusnya ditempatkan.

• Menyusun dijalankan sekali pada elemen templat, sebelum cakupan apa pun ada. Ini cocok untuk pengeditan struktural yang digunakan bersama oleh setiap klon.
• Link Dijalankan sekali per instance, setelah template dikloning dan scope dilampirkan. Listener DOM dan pembacaan scope termasuk di sini.

Karena kompilasi tidak memiliki cakupan, apa pun yang membutuhkan data berada di dalam proses penautan, itulah sebabnya contoh di bawah ini mendefinisikan link sendirian.

Mari kita lihat contoh bagaimana kita dapat mencapai hal ini. Tangkapan layar tersebut memberi nomor pada keempat poin di bawah 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

1. Kami menggunakan fungsi link seperti yang didefinisikan dalam AngularJS untuk memberikan kemampuan pada directive untuk mengakses event di HTML DOM.
2. Kita menggunakan kata kunci 'element' karena kita ingin menanggapi suatu kejadian pada elemen HTML DOM, yang dalam kasus ini adalah elemen "div". Kemudian kita menggunakan fungsi "bind" untuk menambahkan fungsionalitas khusus pada kejadian klik elemen tersebut. Kata 'click' adalah kata kunci yang digunakan untuk menunjukkan kejadian klik pada kontrol HTML apa pun.
3. Di sini kita mengatakan bahwa kita ingin mengganti HTML bagian dalam elemen, dalam hal ini elemen div, dengan teks 'Anda mengklik saya'.
4. Di sini kita mendefinisikan tag div untuk menggunakan direktif khusus ng-guru.

💡 olymp trade indonesiaTip: Sebuah directive harus membersihkan dirinya sendiri setelah selesai digunakan. Hapus listener apa pun yang tetap ada setelah elemen di dalamnya berakhir. element.on('$destroy', ...)atau halaman tersebut mengalami kebocoran memori.

Jika kode berhasil dieksekusi, output berikut akan muncul.

Keluaran:

• Awalnya, teks 'Klik Saya' ditampilkan kepada pengguna, karena itulah yang didefinisikan di dalam tag div. Saat Anda mengklik tag div, output di bawah ini akan ditampilkan sebagai gantinya.

Setiap contoh di atas menggunakan satu atau dua properti dari objek definisi yang sama. Kumpulan lengkapnya layak untuk disimpan.ping untuk diberikan.

Referensi Properti Objek Definisi Direktif

Objek yang dikembalikan oleh pabrik direktif adalah Objek Definisi DirektifSetiap properti menjawab satu pertanyaan tentang bagaimana arahan tersebut berperilaku.

💡 olymp trade indonesiaTip: Mulailah dengan restrict, template ke link. menambahkan scope untuk digunakan kembali, controller ke require untuk panggilan antar direktif, dan tinggalkan priority ke terminal sendirian.

Pertanyaan Umum Demo Slot