คำสั่งที่กำหนดเองใน AngularJS: วิธีการสร้าง? [ตัวอย่าง]

คำสั่งที่กำหนดเองคืออะไร?

A คำสั่งที่กำหนดเอง ใน AngularJS มีไดเร็กทิฟที่ผู้ใช้กำหนดเองซึ่งให้ผู้ใช้สามารถใช้ฟังก์ชันที่ต้องการเพื่อขยายฟังก์ชัน HTML สามารถกำหนดได้โดยใช้ฟังก์ชัน "ไดเร็กทิฟ" และจะแทนที่องค์ประกอบที่ใช้ แม้ว่า AngularJS จะมีไดเร็กทิฟที่มีประสิทธิภาพมากมาย แต่บางครั้งก็จำเป็นต้องใช้ไดเร็กทิฟที่กำหนดเอง

จะสร้างคำสั่งที่กำหนดเองได้อย่างไร?

ลองมาดูตัวอย่างว่าเราสามารถสร้างคำสั่งที่กำหนดเองของ AngularJS ได้อย่างไร

คำสั่งที่กำหนดเองในกรณีของเราคือการแทรกแท็ก div ซึ่งมีข้อความ “AngularJS Tutorial” ในหน้าของเราเมื่อมีการเรียกใช้คำสั่ง

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

คำอธิบายรหัส

เรากำลังสร้าง a โมดูล สำหรับการใช้งานเชิงมุมของเรา สิ่งนี้จำเป็นในการสร้างคำสั่งแบบกำหนดเอง เนื่องจากคำสั่งจะถูกสร้างขึ้นโดยใช้โมดูลนี้
ขณะนี้เรากำลังสร้างคำสั่งที่กำหนดเองที่เรียกว่า "ngGuru" และกำหนดฟังก์ชันซึ่งจะมีโค้ดที่กำหนดเองสำหรับคำสั่งของเราหมายเหตุ: - โปรดทราบว่าเมื่อกำหนดไดเรกทิฟ เราจะกำหนดเป็น ngGuru โดยใช้ตัวอักษร 'G' เป็นตัวพิมพ์ใหญ่ และเมื่อเราเข้าถึงจากแท็ก div เป็นไดเรกทิฟ เราจะเข้าถึงเป็น ng-guru นี่คือวิธีที่ Angular เข้าใจไดเรกทิฟที่กำหนดเองซึ่งกำหนดไว้ในแอปพลิเคชัน ประการแรก ชื่อของไดเรกทิฟที่กำหนดเองควรเริ่มต้นด้วยตัวอักษร 'ng' ประการที่สอง เครื่องหมายขีดกลาง '-' ควรระบุเฉพาะเมื่อเรียกใช้ไดเรกทิฟ และประการที่สาม ตัวอักษรตัวแรกที่ตามหลังตัวอักษร 'ng' เมื่อกำหนดไดเรกทิฟสามารถเป็นตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ก็ได้
เรากำลังใช้พารามิเตอร์เทมเพลตซึ่งเป็นพารามิเตอร์ที่กำหนดโดย Angular สำหรับคำสั่งที่กำหนดเอง ในที่นี้ เรากำลังกำหนดว่าเมื่อใดก็ตามที่มีการใช้คำสั่งนี้ เพียงใช้ค่าของเทมเพลตและแทรกลงในโค้ดการโทร
ตอนนี้เรากำลังใช้คำสั่ง "ng-guru" ที่เราสร้างขึ้นเอง เมื่อเราทำเช่นนี้ค่าที่เรากำหนดให้กับเทมเพลตของเรา” บทช่วยสอน JS เชิงมุม ” ตอนนี้จะถูกฉีดที่นี่

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

ผลลัพธ์ข้างต้นแสดงให้เห็นชัดเจนว่าคำสั่ง ng-guru ที่กำหนดเองของเราซึ่งมีเทมเพลตที่กำหนดไว้สำหรับการแสดงข้อความที่กำหนดเองนั้นจะแสดงในเบราว์เซอร์

คำสั่งและขอบเขตของ AngularJs

ขอบเขตถูกกำหนดให้เป็นกาวที่เชื่อมโยงคอนโทรลเลอร์เข้ากับมุมมองโดยการจัดการข้อมูลระหว่างมุมมองและคอนโทรลเลอร์

เมื่อสร้างคำสั่ง AngularJs แบบกำหนดเอง โดยค่าเริ่มต้นพวกเขาจะสามารถเข้าถึงวัตถุขอบเขตในตัวควบคุมหลักได้

ด้วยวิธีนี้ จึงกลายเป็นเรื่องง่ายสำหรับคำสั่งแบบกำหนดเองในการใช้ประโยชน์จากข้อมูลที่ส่งผ่านไปยังตัวควบคุมหลัก

ลองดูตัวอย่างคำสั่งที่กำหนดเองของ AngularJS ว่าเราสามารถใช้ขอบเขตของตัวควบคุมหลักในคำสั่งที่กำหนดเองของเราได้อย่างไร

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

คำอธิบายรหัส

ก่อนอื่นเราสร้างคอนโทรลเลอร์ที่เรียกว่า "DemoController" ในที่นี้ เรากำหนดตัวแปรที่เรียกว่า TutorialName และแนบไปกับวัตถุขอบเขตในคำสั่งเดียว – $scope.tutorialName = “AngularJS”
ในคำสั่งที่กำหนดเองของเรา เราสามารถเรียกตัวแปร “tutorialName” ได้โดยใช้นิพจน์ ตัวแปรนี้จะสามารถเข้าถึงได้เนื่องจากมีการกำหนดไว้ในคอนโทรลเลอร์ “DemoController” ซึ่งจะกลายเป็นพาเรนต์สำหรับคำสั่งนี้
เราอ้างอิงตัวควบคุมในแท็ก div ซึ่งจะทำหน้าที่เป็นแท็ก div หลักของเรา โปรดทราบว่าจะต้องดำเนินการนี้ก่อนเพื่อให้คำสั่งที่กำหนดเองของเราเข้าถึงตัวแปร TutorialName
ในที่สุดเราก็แนบคำสั่งที่กำหนดเอง “ng-guru” เข้ากับแท็ก div ของเรา

Output:

ผลลัพธ์ข้างต้นแสดงให้เห็นอย่างชัดเจนว่าคำสั่งที่กำหนดเองของเรา “ng-guru” ใช้ตัวแปรขอบเขตชื่อบทช่วยสอนในตัวควบคุมหลัก

การใช้คอนโทรลเลอร์พร้อมคำสั่ง

เชิงมุมให้ความสะดวกในการ เข้าถึงตัวแปรสมาชิกของคอนโทรลเลอร์ได้โดยตรงจากคำสั่งที่กำหนดเอง โดยไม่จำเป็นต้องใช้วัตถุขอบเขต

สิ่งนี้มีความจำเป็นในบางครั้งเนื่องจากในแอปพลิเคชันคุณอาจมีออบเจ็กต์ขอบเขตหลายอันที่เป็นของคอนโทรลเลอร์หลายตัว

ดังนั้นจึงมีโอกาสสูงที่คุณจะทำผิดพลาดในการเข้าถึงวัตถุขอบเขตของตัวควบคุมที่ไม่ถูกต้อง

ในสถานการณ์เช่นนี้ มีวิธีระบุเป็นพิเศษว่า “ฉันต้องการเข้าถึงคอนโทรลเลอร์เฉพาะนี้” จากคำสั่งของฉัน

ลองมาดูตัวอย่างว่าเราจะบรรลุเป้าหมายนี้ได้อย่างไร

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

คำอธิบายรหัส

ก่อนอื่นเราสร้างคอนโทรลเลอร์ที่เรียกว่า "DemoController" ในที่นี้ เราจะกำหนดตัวแปรที่เรียกว่า "tutorialName" และในครั้งนี้ แทนที่จะแนบมันเข้ากับวัตถุขอบเขต เราจะแนบมันเข้ากับคอนโทรลเลอร์โดยตรง
ในคำสั่งที่กำหนดเองของเรา เราได้กล่าวถึงเป็นพิเศษว่าเราต้องการใช้คอนโทรลเลอร์ “DemoController” โดยใช้คีย์เวิร์ดพารามิเตอร์คอนโทรลเลอร์
เราสร้างการอ้างอิงถึงคอนโทรลเลอร์โดยใช้พารามิเตอร์ "controllerAs" สิ่งนี้ถูกกำหนดโดย Angular และเป็นวิธีอ้างอิงคอนโทรลเลอร์เป็นข้อมูลอ้างอิง

บันทึก: -เป็นไปได้ที่จะเข้าถึงคอนโทรลเลอร์หลายตัวในคำสั่งเดียวโดยการระบุบล็อกตามลำดับของคำสั่งคอนโทรลเลอร์, controllerAs และเทมเพลต

สุดท้ายนี้ ในเทมเพลตของเรา เราใช้ข้อมูลอ้างอิงที่สร้างในขั้นตอนที่ 3 และใช้ตัวแปรสมาชิกที่แนบโดยตรงกับคอนโทรลเลอร์ในขั้นตอนที่ 1

Output:

ผลลัพธ์แสดงให้เห็นอย่างชัดเจนว่าคำสั่งที่กำหนดเองกำลังเข้าถึง DemoController และชื่อตัวแปรสมาชิกที่แนบไว้อย่างชัดเจน และแสดงข้อความ “Angular”

วิธีสร้างคำสั่งที่นำมาใช้ซ้ำได้

เราได้เห็นพลังของคำสั่งแบบกำหนดเองแล้ว แต่เราสามารถนำมันไปสู่อีกระดับได้ด้วยการสร้างคำสั่งที่นำมาใช้ซ้ำได้ของเราเอง

ตัวอย่างเช่น สมมติว่าเราต้องการแทรกโค้ดที่จะแสดงแท็ก HTML ด้านล่างในหลายหน้าจอเสมอ ซึ่งโดยพื้นฐานแล้วเป็นเพียงอินพุตสำหรับ "ชื่อ" และ "อายุ" ของผู้ใช้

หากต้องการใช้ฟังก์ชันนี้ซ้ำบนหลายหน้าจอโดยไม่ต้องเขียนโค้ดในแต่ละครั้ง เราจะสร้างตัวควบคุมหลักหรือคำสั่งเป็นเชิงมุมเพื่อเก็บตัวควบคุมเหล่านี้ ("ชื่อ" และ "อายุ" ของผู้ใช้)

ตอนนี้ แทนที่จะป้อนโค้ดเดียวกันสำหรับหน้าจอด้านล่างทุกครั้ง เราสามารถฝังโค้ดนี้ในคำสั่งและฝังคำสั่งนั้นได้ทุกเวลา

เรามาดูตัวอย่างว่าเราจะบรรลุเป้าหมายนี้ได้อย่างไร

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

คำอธิบายรหัส

ในข้อมูลโค้ดของเราสำหรับคำสั่งที่กำหนดเอง สิ่งที่เปลี่ยนแปลงเป็นเพียงค่าที่กำหนดให้กับพารามิเตอร์เทมเพลตของคำสั่งที่กำหนดเองของเรา แทนที่จะเป็นแท็กหรือข้อความแผนห้า จริงๆ แล้วเรากำลังป้อนส่วนควบคุมอินพุต 2 ส่วนทั้งหมดสำหรับ " ชื่อ” และ “อายุ” ที่ต้องแสดงบนเพจของเรา

Output:

จากผลลัพธ์ข้างต้น เราจะเห็นว่าข้อมูลโค้ดจากเทมเพลตของคำสั่งที่กำหนดเองได้รับการเพิ่มลงในเพจ

คำสั่ง AngularJS และส่วนประกอบ – ng-transclude

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ Angular มีไว้เพื่อขยายฟังก์ชันการทำงานของ HTML- และเราได้เห็นแล้วว่าเราสามารถฉีดโค้ดได้อย่างไรโดยใช้คำสั่งที่นำมาใช้ซ้ำแบบกำหนดเองได้

แต่ในการพัฒนาเว็บแอปพลิเคชันสมัยใหม่ ยังมีแนวคิดในการพัฒนาส่วนประกอบของเว็บด้วย ซึ่งโดยทั่วไปหมายถึงการสร้างแท็ก HTML ของเราเองที่สามารถใช้เป็นส่วนประกอบในโค้ดของเราได้

ดังนั้นเชิงมุมจึงให้พลังอีกระดับหนึ่งในการขยายแท็ก HTML โดยให้ความสามารถในการแทรกแอตทริบิวต์ลงในแท็ก HTML เอง

นี้จะกระทำโดย “ng-รวม” ซึ่งเป็นการตั้งค่าประเภทหนึ่งที่จะบอกเชิงมุมให้จับทุกสิ่งที่ใส่ไว้ในคำสั่งในมาร์กอัป

มาดูตัวอย่างว่าเราจะบรรลุเป้าหมายนี้ได้อย่างไร

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

คำอธิบายรหัส

เรากำลังใช้คำสั่งเพื่อกำหนดแท็ก HTML ที่กำหนดเองที่เรียกว่า 'บานหน้าต่าง' และเพิ่มฟังก์ชันที่จะใส่โค้ดที่กำหนดเองสำหรับแท็กนี้ ในผลลัพธ์ แท็กบานหน้าต่างแบบกำหนดเองของเราจะแสดงข้อความ “AngularJS” เป็นรูปสี่เหลี่ยมผืนผ้าที่มีเส้นขอบสีดำทึบ
ต้องระบุแอตทริบิวต์ "transclude" ว่าเป็นจริง ซึ่งจำเป็นต้องใช้โดยเชิงมุมเพื่อแทรกแท็กนี้ลงใน DOM ของเรา
ในขอบเขต เรากำลังกำหนดแอตทริบิวต์ชื่อ โดยทั่วไปแอตทริบิวต์จะถูกกำหนดเป็นคู่ของชื่อ/ค่า เช่น: name=”value” ในกรณีของเรา ชื่อของแอตทริบิวต์ในแท็ก HTML ของบานหน้าต่างคือ “title” สัญลักษณ์ "@" เป็นข้อกำหนดจากเชิงมุม การทำเช่นนี้เกิดขึ้นเมื่อดำเนินการบรรทัด title={{title}} ในขั้นตอนที่ 5 รหัสที่กำหนดเองสำหรับแอตทริบิวต์ title จะถูกเพิ่มลงในแท็ก HTML ของบานหน้าต่าง
รหัสที่กำหนดเองสำหรับแอตทริบิวต์ชื่อซึ่งเพิ่งวาดเส้นขอบสีดำทึบสำหรับการควบคุมของเรา
สุดท้ายนี้ เรากำลังเรียกแท็ก HTML ที่กำหนดเองพร้อมกับแอตทริบิวต์ title ที่กำหนดไว้

Output:

ผลลัพธ์แสดงให้เห็นอย่างชัดเจนว่าแอตทริบิวต์ title ของแท็ก html5 ของบานหน้าต่างได้รับการตั้งค่าเป็นค่าที่กำหนดเองของ "Angular.JS"

คำสั่งที่ซ้อนกัน

คำสั่งใน AngularJS สามารถซ้อนกันได้ เช่นเดียวกับโมดูลภายในหรือฟังก์ชั่นใดๆ ภาษาโปรแกรมคุณอาจต้องฝังคำสั่งไว้ภายในกันและกัน

คุณสามารถเข้าใจสิ่งนี้ได้ดีขึ้นโดยดูตัวอย่างด้านล่าง

ในตัวอย่างนี้ เรากำลังสร้าง 2 คำสั่งที่เรียกว่า "outer" และ "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>

คำอธิบายรหัส

เรากำลังสร้างคำสั่งที่เรียกว่า "outer" ซึ่งจะทำหน้าที่เป็นคำสั่งหลักของเรา คำสั่งนี้จะทำการเรียกคำสั่ง "ภายใน"
ข้อจำกัด:'E' จำเป็นต้องใช้เชิงมุมเพื่อให้แน่ใจว่าข้อมูลจากคำสั่งภายในจะพร้อมใช้งานกับคำสั่งภายนอก ตัวอักษร 'E' เป็นรูปแบบย่อของคำว่า 'องค์ประกอบ'
ที่นี่เรากำลังสร้างคำสั่งภายในซึ่งแสดงข้อความ “ภายใน” ในแท็ก div
ในเทมเพลตสำหรับคำสั่งภายนอก (ขั้นตอนที่ #4) เรากำลังเรียกคำสั่งภายใน ตรงนี้ เรากำลังฉีดเทมเพลตจากคำสั่งภายในไปยังคำสั่งภายนอก
สุดท้ายนี้ เรากำลังเรียกคำสั่งภายนอกโดยตรง

Output:

จากผลลัพธ์ที่ได้

จะเห็นได้ว่ามีการเรียกทั้งไดเรกทิฟ outer และ inner และแสดงข้อความในแท็ก div ทั้งสอง

การจัดการเหตุการณ์ในคำสั่ง

งานอีเว้นท์ การคลิกเมาส์หรือการคลิกปุ่มดังกล่าวสามารถจัดการได้จากภายในคำสั่งเอง ทำได้โดยใช้ฟังก์ชันลิงก์ ฟังก์ชันลิงก์คือสิ่งที่ช่วยให้คำสั่งแนบตัวเองเข้ากับองค์ประกอบ DOM ในหน้า HTML

ไวยากรณ์:

ไวยากรณ์ขององค์ประกอบลิงก์ดังที่แสดงด้านล่าง

ng-ซ้ำ

link: function ($scope, element, attrs)

โดยปกติฟังก์ชันลิงก์จะยอมรับพารามิเตอร์ 3 ตัว รวมถึงขอบเขต องค์ประกอบที่เชื่อมโยงกับคำสั่ง และแอตทริบิวต์ขององค์ประกอบเป้าหมาย

ลองดูตัวอย่างว่าเราจะบรรลุเป้าหมายนี้ได้อย่างไร

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

คำอธิบายรหัส

เรากำลังใช้ฟังก์ชันลิงก์ตามที่กำหนดไว้ในเชิงมุมเพื่อให้ความสามารถของคำสั่งในการเข้าถึงเหตุการณ์ใน HTML DOM
เราใช้คีย์เวิร์ด 'องค์ประกอบ' เพราะเราต้องการตอบสนองต่อเหตุการณ์สำหรับองค์ประกอบ HTML DOM ซึ่งในกรณีของเราคือองค์ประกอบ “div” จากนั้นเราใช้ฟังก์ชัน "bind" และบอกว่าเราต้องการเพิ่มฟังก์ชันการทำงานที่กำหนดเองให้กับเหตุการณ์การคลิกขององค์ประกอบ คำ 'คลิก' คือคำหลัก ซึ่งใช้เพื่อแสดงถึงเหตุการณ์การคลิกของการควบคุม HTML ใดๆ ตัวอย่างเช่น ตัวควบคุมปุ่ม HTML มีเหตุการณ์การคลิก เนื่องจากในตัวอย่างของเรา เราต้องการเพิ่มโค้ดที่กำหนดเองให้กับเหตุการณ์การคลิกของแท็ก “dev” เราจึงใช้คีย์เวิร์ด 'คลิก'
เรากำลังบอกว่าเราต้องการแทนที่ HTML ภายในขององค์ประกอบ (ในกรณีของเราคือองค์ประกอบ div) ด้วยข้อความ 'คุณคลิกฉัน!'
ที่นี่เรากำลังกำหนดแท็ก div ของเราเพื่อใช้คำสั่งที่กำหนดเองของ ng-guru

Output:

ในตอนแรกข้อความ 'คลิกฉัน' จะแสดงให้ผู้ใช้เห็น เนื่องจากนี่คือสิ่งที่ถูกกำหนดไว้ตั้งแต่แรกในแท็ก div เมื่อคุณคลิกที่แท็ก div จริงๆ ผลลัพธ์ด้านล่างนี้จะปรากฏขึ้น

สรุป

เราสามารถสร้างคำสั่งที่กำหนดเองซึ่งสามารถใช้เพื่อฉีดโค้ดในแอปพลิเคชันเชิงมุมหลัก
คำสั่งแบบกำหนดเองสามารถสร้างขึ้นเพื่อเรียกสมาชิกที่กำหนดไว้ในวัตถุขอบเขตในคอนโทรลเลอร์บางตัวได้โดยใช้คีย์เวิร์ด 'Controller', 'controllerAs' และ 'template'
คำสั่งยังสามารถซ้อนกันเพื่อให้มีฟังก์ชันการทำงานแบบฝังซึ่งอาจจำเป็น ขึ้นอยู่กับความต้องการของแอปพลิเคชัน
คำสั่งยังสามารถนำมาใช้ซ้ำได้เพื่อให้สามารถใช้ในการแทรกโค้ดทั่วไปที่อาจจำเป็นต้องใช้ในแอปพลิเคชันเว็บต่างๆ
คำสั่งยังสามารถใช้เพื่อสร้างแท็ก HTML ที่กำหนดเองซึ่งจะมีฟังก์ชันการทำงานของตัวเองที่กำหนดตามความต้องการทางธุรกิจ
เหตุการณ์ยังสามารถจัดการได้จากภายในคำสั่งเพื่อจัดการเหตุการณ์ DOM เช่น การคลิกปุ่มและเมาส์

ที่คุณอาจชอบ:

คำสั่งที่กำหนดเองคืออะไร?

จะสร้างคำสั่งที่กำหนดเองได้อย่างไร?

คำอธิบายรหัส

คำสั่งและขอบเขตของ AngularJs

คำอธิบายรหัส

บทความที่เกี่ยวข้อง

การใช้คอนโทรลเลอร์พร้อมคำสั่ง

คำอธิบายรหัส

วิธีสร้างคำสั่งที่นำมาใช้ซ้ำได้

คำอธิบายรหัส

คำสั่ง AngularJS และส่วนประกอบ – ng-transclude

คำอธิบายรหัส

คำสั่งที่ซ้อนกัน

คำอธิบายรหัส

การจัดการเหตุการณ์ในคำสั่ง

คำอธิบายรหัส

สรุป