Directive Là Gì

Chào các bạn, nội dung bài viết này mình đang trình bày về directive - một có mang quen thuộc vào AngularJS.

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

Angular Directive sầu là gì?

Directive sầu là một tư tưởng trong Angular Framework, nó là hầu hết yếu tố mở rộng cho những thẻ html dùng hỗ trợ các thuộc tính nâng cao cho những thẻ html.

Với directive, Angular compiler đang render ra html mà lại trình duyệt gọi được nhờ vào attribute html, trường đoản cú bình luận tốt xuất phát điểm từ một tag bất kỳ như thế nào được bỏ lên trên trang ...

ví dụ như họ tất cả một thẻ tag ảo:

error-message>error-message>Trình coi ngó quan trọng hiểu thẻ error-message này, mà lại Khi vận dụng chạy, trình biên dịch (AngularJS $compiler) đã dựa vào chỉ dẫn của directive để convert thẻ tag ảo này thành thẻ mà lại trình trông nom có thể phát âm được.

Đó là 1 trong giữa những biện pháp mà directive thao tác. Bài viết này chúng ta cùng mày mò coi directive là gì, nó chuyển động như thế nào, phương pháp sử dụng directive sầu với những nhiều loại directive nhé.

Xem thêm: Tsukkomi Là Gì ? What Does Tsukkomi Mean

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

" ;);

Cú pháp khai báo: angular.module("myApp", <>).directive(...)Tên directive sầu tuân theo phép tắc camelCase, làm việc html thẻ "error-notice" thì tên directive buộc phải knhị báo là "errorNotice".

restrict: "E"Khai báo một số loại directive trải qua cú pháp restrict, E là viết tắt của Element.

Angular vẫn render directive sầu này hệt như sau:

*

Các loại directive

Angular directive sầu bao gồm có 5 loại:

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

Directive sầu E mình đã trình diễn qua ví dụ vừa rồi, tiếp theo hãy coi các ví dụ của những directive sầu sót lại nhằm tìm hiểu coi nó khác gì với directive sầu E nhé:

Directive sầu A (attribute)

Như chúng ta biết thì hồ hết thẻ html đầy đủ hoàn toàn có thể có attribute truyền vào nhằm hỗ trợ thêm các báo cáo rộng cho 1 element, dạng attribute="value"

Như từ viết tắt của directive sầu, angularJS đang thông qua attribute vào một thẻ html nhằm nhận biết một directive sầu.

Ví dụ:

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

var app = angular.module("myApp", <>); ứng dụng.directive("errorAttribute", function() return restrict : "A", template : "Has erorrs

" ;);

AngularJS compile sẽ render directive này như sau:

*

Directive C (class)

Với directive này, Angular đã dựa vào class để nhận biêt một directive.

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

Directive M (comment)

Code thông thường có comment nhằm người viết hoàn toàn có thể ghi chú/ phân tích và lý giải về code ...Trong html thì comment gồm dạng sau:

!–– đoạn bình luận ––>Các đoạn bình luận này các bạn phải inspect code lên giúp xem. AngularJS cung ứng họ knhị báo directive sầu trong phản hồi, sau đấy là ví dụ:

var app = angular.module("myApp", <>); app.directive("commentDirective", function() return restrict : "M", replace : true, template : "Directive sầu comment type!" ;);Và AngularJS sẽ render nó nlỗi sau, họ không thấy luôn đoạn bình luận mà chỉ thấy nội dung bên 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à sau cuối 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: "