Chỉ thị TÙY CHỈNH trong AngularJS: Cách tạo? [Ví dụ]

Chỉ thị tùy chỉnh là gì?

A Chỉ thị tùy chỉnh trong AngularJS là một chỉ thị do người dùng định nghĩa cung cấp cho người dùng sử dụng các hàm mong muốn để mở rộng chức năng HTML. Nó có thể được định nghĩa bằng cách sử dụng hàm "chỉ thị" và nó thay thế phần tử mà nó được sử dụng. Mặc dù AngularJS có rất nhiều chỉ thị mạnh mẽ ngay từ đầu, đôi khi vẫn cần các chỉ thị tùy chỉnh.

Làm thế nào để tạo một chỉ thị tùy chỉnh?

Chúng ta hãy xem một ví dụ về cách chúng ta có thể tạo một lệnh tùy chỉnh AngularJS.

Lệnh tùy chỉnh trong trường hợp của chúng tôi chỉ đơn giản là chèn một thẻ div có dòng chữ “Hướng dẫn AngularJS” vào trang của chúng tôi khi lệnh được gọi.

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

Giải thích mã

Đầu tiên chúng tôi tạo ra một mô-đun cho ứng dụng góc cạnh của chúng tôi. Điều này là bắt buộc để tạo một lệnh tùy chỉnh vì lệnh này sẽ được tạo bằng mô-đun này.
Chúng tôi hiện đang tạo một lệnh tùy chỉnh có tên “ngGuru” và xác định một hàm sẽ có mã tùy chỉnh cho lệnh của chúng tôi.Lưu ý: - Lưu ý rằng khi định nghĩa chỉ thị, chúng ta đã định nghĩa nó là ngGuru với chữ cái 'G' viết hoa. Và khi chúng ta truy cập nó từ thẻ div của mình dưới dạng chỉ thị, chúng ta đang truy cập nó dưới dạng ng-guru. Đây là cách angular hiểu các chỉ thị tùy chỉnh được định nghĩa trong một ứng dụng. Đầu tiên, tên của chỉ thị tùy chỉnh phải bắt đầu bằng các chữ cái 'ng'. Thứ hai, ký hiệu gạch nối '-' chỉ nên được đề cập khi gọi chỉ thị. Và thứ ba, chữ cái đầu tiên theo sau các chữ cái 'ng' khi định nghĩa chỉ thị có thể viết thường hoặc viết hoa.
Chúng tôi đang sử dụng tham số mẫu mà tham số được xác định bởi Angular cho các lệnh tùy chỉnh. Trong phần này, chúng tôi xác định rằng bất cứ khi nào lệnh này được sử dụng, thì chỉ cần sử dụng giá trị của mẫu và đưa nó vào mã gọi.
Ở đây chúng tôi hiện đang sử dụng lệnh “ng-guru” được tạo tùy chỉnh của mình. Khi chúng tôi thực hiện việc này, giá trị chúng tôi đã xác định cho mẫu “ Hướng dẫn JS góc ” bây giờ sẽ được tiêm vào đây.

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Đầu ra ở trên cho thấy rõ ràng rằng chỉ thị ng-guru tùy chỉnh của chúng ta, có mẫu được xác định để hiển thị văn bản tùy chỉnh, sẽ được hiển thị trên trình duyệt.

Chỉ thị và phạm vi của AngularJs

Phạm vi được định nghĩa là chất keo gắn kết bộ điều khiển với chế độ xem bằng cách quản lý dữ liệu giữa chế độ xem và bộ điều khiển.

Khi tạo các chỉ thị AngularJs tùy chỉnh, theo mặc định, chúng sẽ có quyền truy cập vào đối tượng phạm vi trong bộ điều khiển chính.

Bằng cách này, lệnh tùy chỉnh sẽ dễ dàng sử dụng dữ liệu được chuyển đến bộ điều khiển chính.

Hãy xem ví dụ về chỉ thị tùy chỉnh AngularJS về cách chúng ta có thể sử dụng phạm vi của bộ điều khiển gốc trong chỉ thị tùy chỉnh của mình.

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

Giải thích mã

Trước tiên, chúng tôi tạo một bộ điều khiển có tên là “DemoController”. Trong phần này, chúng ta xác định một biến có tên là tutorialName và gắn nó vào đối tượng phạm vi trong một câu lệnh – $scope.tutorialName = “AngularJS”.
Trong lệnh tùy chỉnh, chúng ta có thể gọi biến “guideName” bằng cách sử dụng một biểu thức. Biến này có thể truy cập được vì nó được xác định trong bộ điều khiển “DemoController”, bộ điều khiển này sẽ trở thành cha của lệnh này.
Chúng tôi tham chiếu bộ điều khiển trong thẻ div, thẻ này sẽ hoạt động như thẻ div gốc của chúng tôi. Lưu ý rằng điều này cần được thực hiện trước tiên để lệnh tùy chỉnh của chúng tôi truy cập vào biến tutorialName.
Cuối cùng, chúng tôi chỉ đính kèm chỉ thị tùy chỉnh “ng-guru” vào thẻ div của mình.

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Kết quả đầu ra ở trên cho thấy rõ ràng rằng lệnh tùy chỉnh “ng-guru” của chúng tôi sử dụng biến phạm vi tutorialName trong bộ điều khiển chính.

Sử dụng bộ điều khiển với chỉ thị

Angular cung cấp cơ sở cho truy cập trực tiếp vào biến thành viên của bộ điều khiển từ các lệnh tùy chỉnh mà không cần đến đối tượng phạm vi.

Điều này đôi khi trở nên cần thiết vì trong một ứng dụng, bạn có thể có nhiều đối tượng phạm vi thuộc về nhiều bộ điều khiển.

Vì vậy, khả năng cao là bạn có thể mắc lỗi khi truy cập sai đối tượng phạm vi của bộ điều khiển sai.

Trong trường hợp như vậy, có một cách để đề cập cụ thể đến việc nói “Tôi muốn truy cập bộ điều khiển cụ thể này” từ lệnh của tôi.

Chúng ta hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.

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

Giải thích mã

Trước tiên, chúng tôi tạo một bộ điều khiển có tên là “DemoController”. Trong phần này, chúng ta sẽ định nghĩa một biến có tên là “tutorialName” và lần này thay vì gắn nó vào đối tượng phạm vi, chúng ta sẽ gắn nó trực tiếp vào bộ điều khiển.
Trong chỉ thị tùy chỉnh của chúng tôi, chúng tôi đặc biệt đề cập đến việc chúng tôi muốn sử dụng bộ điều khiển “DemoController” bằng cách sử dụng từ khóa tham số bộ điều khiển.
Chúng tôi tạo một tham chiếu đến bộ điều khiển bằng cách sử dụng tham số “controllerAs”. Điều này được định nghĩa bởi Angular và là cách để tham chiếu bộ điều khiển làm tham chiếu.

Chú thích: -Có thể truy cập nhiều bộ điều khiển trong một lệnh bằng cách chỉ định các khối tương ứng của bộ điều khiển, bộ điều khiển và các câu lệnh mẫu.

Cuối cùng, trong mẫu của chúng tôi, chúng tôi đang sử dụng tham chiếu được tạo ở bước 3 và sử dụng biến thành viên được gắn trực tiếp vào bộ điều khiển ở Bước 1.

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Đầu ra cho thấy rõ ràng rằng lệnh tùy chỉnh đặc biệt truy cập vào DemoController và biến thành viên tutorialName được đính kèm với nó và hiển thị văn bản “Angular”.

Cách tạo chỉ thị có thể tái sử dụng

Chúng ta đã thấy sức mạnh của chỉ thị tùy chỉnh nhưng chúng ta có thể nâng điều đó lên một tầm cao mới bằng cách xây dựng các chỉ thị có thể sử dụng lại của riêng mình.

Ví dụ: giả sử chúng tôi muốn chèn mã luôn hiển thị các thẻ HTML bên dưới trên nhiều màn hình, về cơ bản chỉ là đầu vào cho “Tên” và “tuổi” của người dùng.

Để sử dụng lại chức năng này trên nhiều màn hình mà không cần mã hóa mỗi lần, chúng tôi tạo một điều khiển chính hoặc lệnh ở góc để giữ các điều khiển này (“Tên” và “tuổi” của người dùng).

Vì vậy, bây giờ, thay vì nhập cùng một mã cho màn hình bên dưới mỗi lần, chúng ta thực sự có thể nhúng mã này vào một lệnh và nhúng lệnh đó vào bất kỳ thời điểm nào.

Hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.

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

Giải thích mã

Trong đoạn mã dành cho lệnh tùy chỉnh của chúng tôi, những thay đổi chỉ là giá trị được cung cấp cho tham số mẫu của lệnh tùy chỉnh của chúng tôi. Thay vì thẻ hoặc văn bản gói 2, chúng tôi thực sự đang nhập toàn bộ đoạn của XNUMX điều khiển đầu vào cho “ Tên” và “tuổi” cần được hiển thị trên trang của chúng tôi.

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Từ kết quả đầu ra ở trên, chúng ta có thể thấy đoạn mã từ mẫu của lệnh tùy chỉnh sẽ được thêm vào trang.

Các chỉ thị và thành phần của AngularJS – ng-transclude

Như chúng tôi đã đề cập trước đó, Angular nhằm mục đích mở rộng chức năng của HTML. Và chúng ta đã thấy cách chúng ta có thể chèn mã bằng cách sử dụng các lệnh tùy chỉnh có thể sử dụng lại.

Nhưng trong quá trình phát triển ứng dụng web hiện đại, cũng có khái niệm phát triển các thành phần web. Về cơ bản, điều này có nghĩa là tạo các thẻ HTML của riêng chúng tôi có thể được sử dụng làm thành phần trong mã của chúng tôi.

Do đó, góc cung cấp một mức sức mạnh khác để mở rộng các thẻ HTML bằng cách cung cấp khả năng đưa các thuộc tính vào chính các thẻ HTML.

Việc này được thực hiện bởi “ng-transcludeThẻ ”, là một loại cài đặt để yêu cầu góc cạnh nắm bắt mọi thứ được đặt bên trong lệnh trong đánh dấu.

Hãy lấy một ví dụ về cách chúng ta có thể đạt được điều này.

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

Giải thích mã

Chúng tôi đang sử dụng lệnh này để xác định thẻ HTML tùy chỉnh có tên là 'pane' và thêm một hàm sẽ đặt một số mã tùy chỉnh cho thẻ này. Ở đầu ra, thẻ khung tùy chỉnh của chúng tôi sẽ hiển thị văn bản “AngularJS” trong một hình chữ nhật có viền đen liền.
Thuộc tính “transclude” phải được đề cập là true, thuộc tính này được yêu cầu bởi Angular để đưa thẻ này vào DOM của chúng tôi.
Trong phạm vi, chúng tôi đang xác định thuộc tính tiêu đề. Các thuộc tính thường được xác định theo cặp tên/giá trị như: name=”value”. Trong trường hợp của chúng tôi, tên của thuộc tính trong thẻ HTML khung của chúng tôi là “tiêu đề”. Biểu tượng “@” là yêu cầu từ góc cạnh. Điều này được thực hiện để khi dòng title={{title}} được thực thi ở Bước 5, mã tùy chỉnh cho thuộc tính title sẽ được thêm vào thẻ HTML của khung.
Mã tùy chỉnh cho thuộc tính tiêu đề chỉ vẽ một đường viền màu đen liền mạch để chúng tôi kiểm soát.
Cuối cùng, chúng tôi đang gọi thẻ HTML tùy chỉnh của mình cùng với thuộc tính tiêu đề đã được xác định.

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Đầu ra cho thấy rõ ràng rằng thuộc tính tiêu đề của thẻ html5 khung đã được đặt thành giá trị tùy chỉnh của “Angular.JS”.

Chỉ thị lồng nhau

Các chỉ thị trong AngularJS có thể được lồng vào nhau. Giống như các mô-đun hoặc chức năng bên trong trong bất kỳ ngôn ngữ lập trình, bạn có thể cần phải nhúng các chỉ thị vào nhau.

Bạn có thể hiểu rõ hơn về điều này bằng cách xem ví dụ dưới đây.

Trong ví dụ này, chúng ta đang tạo 2 chỉ thị gọi là “outer” và “inner”.

Lệnh bên trong hiển thị một văn bản có tên là “Inner”.
Trong khi lệnh bên ngoài thực sự thực hiện lệnh gọi đến lệnh bên trong để hiển thị văn bản có tên là “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>

Giải thích mã

Chúng tôi đang tạo một lệnh có tên là "outer" sẽ hoạt động như lệnh gốc của chúng tôi. Lệnh này sau đó sẽ thực hiện lệnh gọi đến lệnh "bên trong".
Hạn chế:'E' được yêu cầu bởi góc cạnh để đảm bảo rằng dữ liệu từ lệnh bên trong có sẵn cho lệnh bên ngoài. Chữ 'E' là dạng viết tắt của từ 'Thành phần'.
Ở đây chúng ta đang tạo chỉ thị bên trong hiển thị văn bản “Bên trong” trong thẻ div.
Trong mẫu cho lệnh bên ngoài (bước # 4), chúng tôi đang gọi lệnh bên trong. Vì vậy, ở đây chúng ta đang chèn mẫu từ lệnh bên trong vào lệnh bên ngoài.
Cuối cùng, chúng ta trực tiếp gọi ra chỉ thị bên ngoài.

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Từ đầu ra,

Có thể thấy cả chỉ thị bên ngoài và bên trong đều đã được gọi và văn bản trong cả hai thẻ div đều được hiển thị.

Xử lý các sự kiện trong một lệnh

Sự kiện những lần bấm chuột hoặc bấm nút như vậy có thể được xử lý từ bên trong các chỉ thị. Điều này được thực hiện bằng cách sử dụng chức năng liên kết. Hàm liên kết là thứ cho phép lệnh tự đính kèm vào các thành phần DOM trong trang HTML.

Cú pháp:

Cú pháp của phần tử liên kết như dưới đây

ng-lặp lại

link: function ($scope, element, attrs)

Hàm liên kết thường chấp nhận 3 tham số bao gồm phạm vi, phần tử mà lệnh được liên kết và các thuộc tính của phần tử đích.

Hãy xem một ví dụ về cách chúng ta có thể thực hiện được điều này.

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

Giải thích mã

Chúng tôi đang sử dụng hàm liên kết như được định nghĩa trong góc để cung cấp khả năng cho các lệnh truy cập các sự kiện trong HTML DOM.
Chúng tôi đang sử dụng từ khóa 'phần tử' vì chúng tôi muốn phản hồi một sự kiện cho phần tử HTML DOM, trong trường hợp của chúng tôi sẽ là phần tử “div”. Sau đó, chúng tôi sử dụng chức năng "liên kết" và nói rằng chúng tôi muốn thêm chức năng tùy chỉnh vào sự kiện nhấp chuột của phần tử. Từ 'nhấp chuột' là từ khóa được sử dụng để biểu thị sự kiện nhấp chuột của bất kỳ điều khiển HTML nào. Ví dụ: điều khiển nút HTML có sự kiện nhấp chuột. Vì trong ví dụ của chúng tôi, chúng tôi muốn thêm mã tùy chỉnh vào sự kiện nhấp chuột của thẻ “dev” nên chúng tôi sử dụng từ khóa 'nhấp chuột'.
Ở đây chúng tôi muốn thay thế HTML bên trong của phần tử (trong trường hợp của chúng tôi là phần tử div) bằng văn bản 'Bạn đã nhấp vào tôi!'.
Ở đây chúng tôi đang xác định thẻ div để sử dụng lệnh tùy chỉnh ng-guru.

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Ban đầu, văn bản 'Click Me' sẽ được hiển thị cho người dùng vì đây là nội dung đã được xác định ban đầu trong thẻ div. Khi bạn thực sự nhấp vào thẻ div, kết quả bên dưới sẽ được hiển thị

Tổng kết

Người ta cũng có thể tạo một lệnh tùy chỉnh có thể được sử dụng để chèn mã vào ứng dụng góc chính.
Các lệnh tùy chỉnh có thể được thực hiện để gọi các thành viên được xác định trong đối tượng phạm vi trong một bộ điều khiển nhất định bằng cách sử dụng các từ khóa 'Controller', 'controllerAs' và 'template'.
Các chỉ thị cũng có thể được lồng vào nhau để cung cấp chức năng nhúng có thể được yêu cầu tùy thuộc vào nhu cầu của ứng dụng.
Các chỉ thị cũng có thể được tái sử dụng để chúng có thể được sử dụng để chèn mã phổ biến có thể được yêu cầu trên các ứng dụng web khác nhau.
Chỉ thị cũng có thể được sử dụng để tạo các thẻ HTML tùy chỉnh có chức năng riêng được xác định theo yêu cầu kinh doanh.
Các sự kiện cũng có thể được xử lý từ bên trong các lệnh để xử lý các sự kiện DOM như nhấp chuột và nút.

Chỉ thị tùy chỉnh là gì?

Làm thế nào để tạo một chỉ thị tùy chỉnh?

Giải thích mã

Chỉ thị và phạm vi của AngularJs

Giải thích mã

NHỮNG BÀI VIẾT LIÊN QUAN

Sử dụng bộ điều khiển với chỉ thị

Giải thích mã

Cách tạo chỉ thị có thể tái sử dụng

Giải thích mã

Các chỉ thị và thành phần của AngularJS – ng-transclude

Giải thích mã

Chỉ thị lồng nhau

Giải thích mã

Xử lý các sự kiện trong một lệnh

Giải thích mã

Tổng kết

Đăng kí để nhận thư mới