Directive là gì

Chào chúng ta, nội dung bài viết này bản thân đang trình diễn về directive - một quan niệm thân thuộc vào AngularJS.

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

Angular Directive là gì?

Directive là một trong định nghĩa vào Angular Framework, nó là đều nhân tố mở rộng cho các thẻ html cần sử dụng bổ trợ các ở trong tính nâng cấp cho những thẻ html.

Với directive sầu, Angular compiler sẽ render ra html nhưng trình thông qua hiểu được nhờ vào attribute html, từ bỏ comment hay từ 1 tag bất kỳ nào được để lên trang ...

Ví dụ bọn họ gồm một thẻ tag ảo:

error-message>error-message>Trình chăm chú không thể đọc thẻ error-message này, nhưng Khi áp dụng chạy, trình biên dịch (AngularJS $compiler) đang dựa vào hướng dẫn của directive nhằm convert thẻ tag ảo này thành thẻ mà lại trình chuẩn y có thể hiểu được.

Đó là một trong những trong số những bí quyết nhưng directive sầu làm việc. Bài viết này họ cùng khám phá coi directive là gì, nó vận động ra làm sao, giải pháp áp dụng directive sầu cùng các một số loại directive sầu nhé.

Xem thêm: Các Món Làm Từ Chuối Chín - Những Món Ăn Từ Chuối Siêu Hấp Dẫn

var tiện ích = 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 theo đúng quy tắc camelCase, sinh sống html thẻ "error-notice" thì tên directive sầu đề nghị khai báo là "errorNotice".

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

Angular vẫn render directive này như sau:

*

Các loại directive

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

Directive sầu E (element)Directive sầu A (attribute)Directive sầu C (class)Directive M (comment)Directive render qua tệp tin html

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

Directive sầu A (attribute)

Nlỗi họ biết thì đều thẻ html phần nhiều có thể tất cả attribute truyền vào nhằm hỗ trợ thêm những đọc tin hơn cho một element, dạng attribute="value"

Như trường đoản cú viết tắt của directive, angularJS đang trải qua attribute trong một thẻ html nhằm nhận biết một directive.

Xem thêm: Dịch Sang Tiếng Anh Ban Giám Hiệu Tiếng Anh, Giám Hiệu In English

Ví dụ:

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

var tiện ích = angular.module("myApp", <>); phầm mềm.directive("errorAttribute", function() return restrict : "A", template : "Has erorrs

" ;);

AngularJS compile vẫn render directive nàhệt như sau:

*

Directive sầu C (class)

Với directive sầu này, Angular vẫn dựa vào class để thừa nhận biêt một directive sầu.

div class="has-error">div>var ứng dụng = angular.module("myApp", <>); ứng dụng.directive("hasError", function() return restrict : "C", template : "error-notice">Something Error!" ;);

Directive sầu M (comment)

Code thông thường có comment để người viết có thể ghi chú/ lý giải về code ...Trong html thì comment bao gồm dạng sau:

!–– đoạn bình luận ––>Các đoạn bình luận này chúng ta cần inspect code lên giúp xem. AngularJS hỗ trợ chúng ta knhị báo directive vào bình luận, sau đây là ví dụ:

var tiện ích = angular.module("myApp", <>); app.directive("commentDirective", function() return restrict : "M", replace : true, template : "Directive sầu bình luận type!" ;);Và AngularJS đang render nó nhỏng sau, họ ko thấy luôn luôn đoạn phản hồi cơ mà chỉ thấy content bên phía trong của directive:

div class="my-user-list"> h1>titleh1> 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 phầm mềm = angular.module("myApp", <>); var ctrl = tiện ích.controller("usersController", function($scope) var vm = this; vm.users = < name: "Quyen", age: "22", name: "Hoai", age: "19", name: "Tham", age: "18" >;);với cuối cùng knhị báo directive sầu, file users-list-directive.js:

tiện ích.directive("usersList", function() { return { restrict : "E", templateUrl : "users-list-template.html", scope: { users: "=", title: "

Chuyên mục: Blogs