Chào chúng ta, nội dung bài viết này bản thân đã trình diễn về directive sầu - một tư tưởng không còn xa lạ vào AngularJS.quý khách hàng đã xem: Directive sầu là gì

Angular Directive là gì?

Directive là một quan niệm vào Angular Framework, nó là đa số yếu tố không ngừng mở rộng cho những thẻ html sử dụng bổ trợ những trực thuộc tính nâng cấp cho những thẻ html.Bạn vẫn xem: Directive là gì

Với directive sầu, Angular compiler đã render ra html nhưng trình chuyên chú phát âm được phụ thuộc vào attribute html, từ phản hồi hay từ 1 tag ngẫu nhiên nào được đặt trên trang ...

lấy ví dụ như bọn họ gồm một thẻ tag ảo:

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

" ;);

Cú pháp knhì báo: angular.module("myApp", ).directive(...)Tên directive sầu tuân thủ theo đúng luật lệ camelCase, sinh hoạt html thẻ "error-notice" thì tên directive sầu nên knhì báo là "errorNotice".

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




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

*



Xem thêm: Tiểu Sử Cố Ca Nhạc Sĩ Duy Khánh Zhou Zhou, Cuộc Đời Sự Nghiệp Của Ca Sĩ Duy Khánh

Các nhiều loại directive

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

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

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

Directive A (attribute)

Như chúng ta biết thì phần lớn thẻ html hầu như có thể bao gồm attribute truyền vào để cung cấp thêm các lên tiếng rộng cho một element, dạng attribute="value"

Ví dụ:

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

var tiện ích = angular.module("myApp", ); ứng dụng.directive("errorAttribute", function() return restrict : "A", template : "Has erorrs

" ;);

AngularJS compile đã render directive sầu nàgiống như sau:




Xem thêm: Tiểu Sử Khả Như Là Ai? Tiểu Sử, Sự Nghiệp, Đời Tư Của Nàng "Mèo"

*

Directive C (class)

Với directive này, Angular vẫn dựa trên class nhằm dấn biêt một directive sầu.

div class="has-error">div>var app = angular.module("myApp", ); phầm mềm.directive("hasError", function() return restrict : "C", template : "error-notice">Something Error!" ;);

Directive sầu M (comment)

Code thường sẽ có comment nhằm bạn viết rất có thể ghi chú/ lý giải về code ...Trong html thì bình luận gồm dạng sau:

!–– đoạn phản hồi ––>Các đoạn phản hồi này các bạn đề xuất inspect code lên để xem. AngularJS cung cấp họ knhị báo directive vào bình luận, sau đấy là ví dụ:

var ứng dụng = angular.module("myApp", ); tiện ích.directive("commentDirective", function() return restrict : "M", replace : true, template : "Directive sầu phản hồi type!" ;);Và AngularJS đã render nó nhỏng sau, họ ko thấy luôn đoạn phản hồi mà chỉ thấy nội dung 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 app = angular.module("myApp", ); var ctrl = tiện ích.controller("usersController", function($scope) var vm = this; vm.users = ;);với sau cùng knhì báo directive sầu, file users-list-directive.js:

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


Chuyên mục: TỔNG HỢP
Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *