HomeĐời SốngDirective là gì

Directive là gì

06:40, 29/03/2021

Chào chúng ta, nội dung bài viết này mình sẽ trình bày về directive sầu - một có mang thân quen trong AngularJS.Quý khách hàng sẽ xem: Directive là gì

Angular Directive là gì?

Directive sầu là 1 tư tưởng trong Angular Framework, nó là các yếu tắc mở rộng cho những thẻ html cần sử dụng bổ trợ các thuộc tính nâng cấp cho những thẻ html.

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

Với directive, Angular compiler đã render ra html nhưng mà trình chu đáo hiểu được dựa vào attribute html, tự phản hồi giỏi từ một tag ngẫu nhiên làm sao được để lên trên trang ...

ví dụ như chúng ta gồm một thẻ tag ảo:

error-message>error-message>Trình chú ý chẳng thể đọc thẻ error-message này, nhưng lại Lúc áp dụng chạy, trình biên dịch (AngularJS $compiler) sẽ dựa vào chỉ dẫn của directive nhằm convert thẻ tag ảo này thành thẻ nhưng mà trình duyệt y có thể gọi được.

Xem thêm: Phong Cách Lãnh Đạo Lôi Cuốn ( Charismatic Leadership Là Gì, Charismatic Leadership By Nguyen Trang

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

" ;);

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

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

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


*

Các loại directive

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

Directive 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 theo sau hãy coi những ví dụ của những directive còn sót lại nhằm khám phá xem nó khác gì cùng với directive sầu E nhé:

Directive sầu A (attribute)

Như chúng ta biết thì những thẻ html những có thể tất cả attribute truyền vào để cung ứng thêm nhiều đọc tin rộng cho một element, dạng attribute="value"

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 vẫn render directive nàgiống như sau:


*

Directive C (class)

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

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

Directive sầu M (comment)

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

!–– đoạn phản hồi ––>Các đoạn phản hồi này bạn phải inspect code lên giúp thấy. AngularJS cung ứng bọn họ khai 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 bình luận type!" ;);Và AngularJS đang render nó như sau, chúng ta không thấy luôn luôn đoạn phản hồi mà chỉ thấy content phía 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 tiện ích = angular.module("myApp", ); var ctrl = phầm mềm.controller("usersController", function($scope) var vm = this; vm.users = ;);với sau cuối khai báo directive sầu, tệp tin users-list-directive.js:

app.directive("usersList", function() { return { restrict : "E", templateUrl : "users-list-template.html", scope: { users: "=", title: "Chuyên ổn mục: Hỏi Đáp