ใช้ AngularJS เพื่อขยายฟังก์ชันการทำงานของ HTML ในคำสั่งที่กำหนดเอง คำจำกัดความการทำงานของ "คำแนะนำ" ที่ใช้โดยคำสั่งที่กำหนดเอง คำสั่งที่กำหนดเองเพียงแทนที่องค์ประกอบที่เปิดใช้งาน ในระหว่างกระบวนการบูตแอปพลิเคชัน AngularJS ค้นหาองค์ประกอบการจับคู่และทำงานได้ดีในการใช้วิธีการคำสั่งที่กำหนดเอง () สำหรับกิจกรรมหนึ่งกิจกรรมจากนั้นจัดการกับองค์ประกอบโดยใช้วิธีการคำสั่งที่กำหนดเอง () ตามช่วงคำสั่ง AngularJS ให้การสนับสนุนเพื่อสร้างคำสั่งที่กำหนดเองด้วยองค์ประกอบต่อไปนี้ของประเภท
คำสั่งองค์ประกอบ - เปิดใช้งานองค์ประกอบการจับคู่เมื่อมีการเผชิญหน้ากับคำสั่ง
แอตทริบิวต์ - - เปิดใช้งานแอตทริบิวต์การจับคู่เมื่อคำสั่งเผชิญหน้า
CSS - - เปิดใช้งานรูปแบบการจับคู่ CSS เมื่อคำสั่งพบ
ความคิดเห็น - - เปิดใช้งานความคิดเห็นที่ตรงกันเมื่อมีการเผชิญหน้ากับคำสั่ง
เข้าใจคำสั่งที่กำหนดเอง
กำหนดแท็ก HTML ที่กำหนดเอง
<student name = "Mahesh"> </student> <br/>
<student name = "piyush"> </student>
กำหนดคำสั่งที่กำหนดเองเพื่อจัดการแท็ก HTML ที่กำหนดเองข้างต้น
var mainapp = angular.module ("MainApp", []); // สร้างคำสั่งพารามิเตอร์แรกคือองค์ประกอบ HTML ที่จะแนบ // เรากำลังแนบแท็ก HTML ของนักเรียน // คำสั่งนี้จะเปิดใช้งานทันทีที่องค์ประกอบของนักเรียนใด ๆ จะพบใน htmlmainapp.directive ('นักเรียน', ฟังก์ชั่น () {// กำหนดคำสั่งวัตถุคำสั่ง var directive = {}; // จำกัด = e, หมายถึงคำสั่งขององค์ประกอบ <b> {{student.name}} </b>, ม้วนหมายเลข: <b> {{student.rollno}} </b> "; // ขอบเขตถูกใช้เพื่อแยกแยะองค์ประกอบของนักเรียนแต่ละองค์ประกอบตามเกณฑ์การเรียกใช้งานเมื่อใช้งาน ฟังก์ชั่น (องค์ประกอบ, แอตทริบิวต์) {element.css ("ชายแดน", "1px solid #cccccc"); <b> "+$ scope.student.rollno+" </b> <br/> "); element.css (" พื้นหลังสี ","#ff00ff ");} return linkfunction;} directive return;});กำหนดคอนโทรลเลอร์เพื่ออัปเดตขอบเขตเป็นคำสั่ง ที่นี่เราใช้ค่าแอตทริบิวต์ชื่อเป็นขอบเขตของเด็ก
mainapp.controller ('studentcontroller', ฟังก์ชั่น ($ scope) {$ scope.mahesh = {}; $ scope.mahesh.name = "mahesh parashar"; $ scope.mahesh.rollno = 1; $ scope.piyush = {}; $ scope.piy $ scope.piyush.rollno = 2;});ตัวอย่าง
<html> <head> <title> คำสั่งเชิงมุม JS Directives </title> </head> <body> <h2> แอปพลิเคชันตัวอย่าง AngularJs </h2> <div ng-app = "mainapp" ng-controller = "studentcontroller"> <student name = "Mahesh"> src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <script> var mainapp = angular.module ("MainApp", []); MainApp.Directive ('นักเรียน', ฟังก์ชั่น () {var directive = {}; directive.restrict = 'e'; directive.template = "นักเรียน: <b> {{student.name}} </b> ฟังก์ชั่น (องค์ประกอบ, แอตทริบิวต์) {element.css ("ชายแดน", "1px solid #cccccccc"); element.css ("พื้นหลังสี", "#ff00ff"); mainapp.controller ('studentcontroller', ฟังก์ชั่น ($ scope) {$ scope.mahesh = {}; $ scope.mahesh.name = "mahesh parashar"; $ scope.mahesh.rollno = 1; $ scope.piyush = {}; $ scope.piy $ scope.piyush.rollno = 2;}); </script> </body> </html>ผลลัพธ์
เปิด textangularjs.html ในเว็บเบราว์เซอร์ ผลลัพธ์มีดังนี้:
ข้างต้นคือการรวบรวมข้อมูลคำสั่งที่กำหนดเองของ AngularJS และเราจะเพิ่มในภายหลัง ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!