Chào các bạn, bài viết này mình sẽ trình bày về directive – một khái niệm quen thuộc trong AngularJS.

Bạn đang xem: Directive là gì

Angular Directive là gì?

Directive là một khái niệm trong Angular Framework, nó là những thành phần mở rộng cho các thẻ html dùng bổ trợ các thuộc tính nâng cao cho các thẻ html.

Với directive, Angular compiler sẽ render ra html mà trình duyệt hiểu được dựa vào attribute html, từ comment hay từ một tag bất kỳ nào được đặt trên trang …

Ví dụ chúng ta có một thẻ tag ảo:

error-message>error-message>Trình duyệt không thể hiểu thẻ error-message này, nhưng khi ứng dụng chạy, trình biên dịch (AngularJS $compiler) sẽ dựa trên chỉ dẫn của directive để convert thẻ tag ảo này thành thẻ mà trình duyệt có thể hiểu được.

Đó là một trong những cách mà directive làm việc. Bài viết này chúng ta cùng tìm hiểu xem directive là gì, nó hoạt động như thế nào, cách sử dụng directive và các loại directive nhé.

Xem thêm: Contact Là Gì

script> script src=”https://thienmaonline.vn/directive-e-example.js”>script> link rel=”stylesheet” href=”style.css”> head> body> div ng-app=”myApp” ng-controller=”myCtrl”> h3>Directive E (Element):h3> error-notice>error-notice> div> body>html>directive-e-example.js:

var app = angular.module(“myApp”, );app.directive(“errorNotice”, function() { return { restrict : “E”, template : “Has erorrs

” };});

Cú pháp khai báo: angular.module(“myApp”, ).directive(…)Tên directive tuân theo quy tắc camelCase, ở html thẻ “error-notice” thì tên directive cần khai báo là “errorNotice”.

restrict: “E”Khai báo loại directive thông qua cú pháp restrict, E là viết tắt của Element.

Angular sẽ render directive này như sau:

*

Các loại directive

Angular directive gồm có 5 loại:

Directive E (element)Directive A (attribute)Directive C (class)Directive M (comment)Directive render qua file html

Directive E mình đã trình bày qua ví dụ vừa rồi, tiếp theo hãy xem các ví dụ của các directive còn lại để tìm hiểu xem nó khác gì với directive E nhé:

Directive A (attribute)

Như chúng ta biết thì mọi thẻ html đều có thể có attribute truyền vào để cung cấp thêm nhiều thông tin hơn cho một element, dạng attribute=”value”

Như từ viết tắt của directive, angularJS sẽ thông qua attribute trong một thẻ html để nhận biết một directive.

Xem thêm: Hpv Là Gì – Nhiễm Virus Có Nguy Hiểm Không

Ví dụ:

div error-attribute>div>directive-a-example.js

var app = angular.module(“myApp”, ); app.directive(“errorAttribute”, function() { return { restrict : “A”, template : “Has erorrs

” };});

AngularJS compile đã render directive này như sau:

*

Directive C (class)

Với directive này, Angular sẽ dựa theo class để nhận biêt một directive.

div class=”has-error”>div>var app = angular.module(“myApp”, ); app.directive(“hasError”, function() { return { restrict : “C”, template : “error-notice”>Something Error!” };});

Directive M (comment)

Code thường có comment để người viết có thể ghi chú/ giải thích về code …Trong html thì comment có dạng sau:

!–– đoạn comment ––>Các đoạn comment này bạn phải inspect code lên để thấy. AngularJS hỗ trợ chúng ta khai báo directive trong comment, sau đây là ví dụ:

var app = angular.module(“myApp”, ); app.directive(“commentDirective”, function() { return { restrict : “M”, replace : true, template : “Directive comment type!” };});Và AngularJS đã render nó như sau, chúng ta không thấy luôn đoạn comment mà chỉ thấy content bên trong của directive:

script> script src=”https://thienmaonline.vn/users-controller.js”>script> script src=”https://thienmaonline.vn/users-list-directive.js”>script> link rel=”stylesheet” type=”text/css” href=”style.css”> head> body> div ng-app=”myApp”> div ng-controller=”usersController as vm”> h2>Custom Directive with templateUrlh2> !–– truyền list users vào directive này ––> users-list users=”vm.users” title=”My Lovers”/> div> div> body>html>user-list-template.html:

div class=”my-user-list”> h1>{{title}}h1> div ng-repeat=”user in users”> p>span ng-bind=”user.name”>span>, span ng-bind=”user.age”>span> tuổip> div>div>users-controller.js

var app = angular.module(“myApp”, ); var ctrl = app.controller(“usersController”, function($scope) { var vm = this; vm.users = ;});và cuối cùng khai báo directive, file users-list-directive.js:

app.directive(“usersList”, function() { return { restrict : “E”, templateUrl : “users-list-template.html”, scope: { users: “=”, title: “

Chuyên mục: Hỏi Đáp