Gunakan AngularJS untuk memperluas fungsionalitas HTML dalam arahan khusus. Definisi fungsional "instruksi" yang digunakan oleh arahan khusus. Petunjuk khusus hanya menggantikan elemen yang diaktifkan. Selama proses boot, aplikasi AngularJS menemukan elemen pencocokan, dan melakukan pekerjaan yang baik untuk menggunakan metode instruksi compile () khusus untuk satu aktivitas dan kemudian berurusan dengan elemen menggunakan metode instruksi link () khusus berdasarkan rentang instruksi. AngularJS memberikan dukungan untuk membuat arahan khusus dengan elemen -elemen tipe berikut.
Elemen Arahan - Aktifkan elemen pencocokan saat arahan bertemu.
Atribut - - Aktifkan atribut yang cocok saat arahan bertemu.
CSS - - Aktifkan gaya CSS yang cocok saat instruksi bertemu.
Komentar - - Aktifkan komentar yang cocok saat arahan bertemu.
Memahami perintah khusus
Tentukan tag HTML khusus.
<nama siswa = "Mahesh"> </Student> <br/>
<nama siswa = "piyush"> </student>
Tentukan arahan khusus untuk menangani tag HTML khusus di atas.
var mainapp = angular.module ("MainApp", []); // Buat arahan, parameter pertama adalah elemen HTML yang akan dilampirkan. // Kami melampirkan tag HTML siswa. // Petunjuk ini akan diaktifkan segera setelah elemen siswa mana pun ditemui dalam htmlmainapp.directive ('student', function () {// Tentukan objek arahan var directive = {}; // batasi = e, menandakan arahan elemen arahan. <b> {{student.name}} </b>, roll no: <b> {{{student.rollno}} </b> "; // lingkup digunakan untuk membedakan setiap elemen siswa berdasarkan kriteria. Directive.scope = {student:" = nama "} // Kompilasi dipanggil selama aplikasi aplikasi. atribut) {element.css ("border", "1px solid #cccccc"); <b> "+$ scope.student.rollno+" </b> <br/> "); element.css (" latar belakang-warna ","#ff00ff ");} return linkFunction;} return directive;});Tentukan pengontrol untuk memperbarui ruang lingkup sebagai instruksi. Di sini kami menggunakan nilai atribut nama sebagai ruang lingkup anak.
Mainapp.controller ('StudentController', function ($ scope) {$ scope.mahesh = {}; $ scope.mahesh.name = "Mahesh parashar"; $ scope.mahesh.rollno = 1; $ scope.piyush = {}; $ scope.piyush. $ scope.piyush.rollno = 2;});contoh
<html> <head> <title> Angular JS Arahan Kustom </itement> </head> <hody> <h2> Aplikasi sampel AngularJS </h2> <v ng-app = "MainApp" ng-controller = "studentController"> <nama student = "Mahesh"> </Student> <br/> <ruchroller = "pi </pi </mahesh"> </student> <br/> <ruchroller = "pi </mahesh" </student> <br/> <ruch name = "pi </mahesh" </student> <br/> <br/> name student = "pi =" Mahesh "> </Student> <br/> <br/> Siswa Siswa =" src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <script> var mainapp = angular.module ("mainapp", []); mainApp.directive('student', function() { var directive = {}; directive.restrict = 'E'; directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>"; directive.scope = { student : "=name" } directive.compile = fungsi (elemen, atribut) {element.css ("border", "1px solid #ccccccccc"); element.css ("latar belakang-warna", "#ff00ff"); Mainapp.controller ('StudentController', function ($ scope) {$ scope.mahesh = {}; $ scope.mahesh.name = "Mahesh parashar"; $ scope.mahesh.rollno = 1; $ scope.piyush = {}; $ scope.piyush. $ scope.piyush.rollno = 2; </script> </body> </html>hasil
Buka TextAngularJs.html di browser web. Hasilnya adalah sebagai berikut:
Di atas adalah kompilasi informasi perintah khusus AngularJS, dan kami akan terus menambahkannya nanti. Terima kasih atas dukungan Anda untuk situs ini!