AngularJS, được phát triển bởi Google, đã giới thiệu một cách mới để xây dựng các ứng dụng web động. Một trong những tính năng mạnh mẽ nhất của nó là directive, cho phép các lập trình viên mở rộng HTML bằng cách thêm hành vi tùy chỉnh. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng directive trong AngularJS, các loại directive khác nhau và cung cấp các ví dụ thực tế để bạn dễ dàng nắm bắt và làm chủ chúng.
Directive trong AngularJS là gì?
Trong AngularJS, directive là các dấu hiệu (marker) trên phần tử DOM (như thuộc tính, tên thẻ, hoặc class CSS) giúp AngularJS gắn hành vi cụ thể vào phần tử đó hoặc biến đổi DOM.
Hiểu một cách đơn giản, directive là các chỉ dẫn giúp AngularJS mở rộng chức năng của HTML.
Tại sao nên sử dụng directive?
- Tái sử dụng mã nguồn dễ dàng
- Đơn giản hóa các hành vi giao diện phức tạp
- Tách biệt logic với template
- Tạo các thành phần HTML tùy chỉnh
- Cải thiện khả năng bảo trì mã nguồn
Một số Directive tích hợp sẵn trong AngularJS
Ví dụ 1: Sử dụng ng-model
<div ng-app=""> <input type="text" ng-model="name"> <p>Hello, {{name}}!</p>
</div>
Giải thích:
- Những gì người dùng nhập vào ô input sẽ tự động hiển thị ở đoạn văn bản bên dưới nhờ vào two-way data binding.
Tạo Directive tùy chỉnh
Mặc dù các directive có sẵn rất mạnh mẽ, nhưng sức mạnh thực sự của AngularJS nằm ở khả năng tạo directive tùy chỉnh để mở rộng HTML.
Cú pháp
app.directive('directiveName', function() { return { restrict: 'E/A/C/M', template: 'Your template here', link: function(scope, element, attrs) { // behavior goes here } };
});
Tùy chọn restrict:
'A' – Sử dụng như một thuộc tính: <div my-directive></div>
'E' – Sử dụng như một thẻ HTML: <my-directive></my-directive>
'C' – Sử dụng như một class CSS: <div class="my-directive"></div>
'M' – Sử dụng như comment HTML
Ví dụ 2: Directive tùy chỉnh với Template
var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', template: '<h3>Hello World from Custom Directive!</h3>' };
});
<hello-world></hello-world>
Kết quả hiển thị:
Hello World from Custom Directive!
Ví dụ 3: Directive tùy chỉnh với Scope và sự kiện
app.directive('clickAlert', function() { return { restrict: 'A', scope: { message: '@' }, link: function(scope, element, attrs) { element.bind('click', function() { alert(scope.message); }); } };
});
<button click-alert message="AngularJS is awesome!">Click Me</button>
Giải thích:
- Khi click vào nút, một hộp thoại alert sẽ hiển thị nội dung được truyền từ thuộc tính
message.
Phân biệt giữa link và compile
link: Dùng để đăng ký các sự kiện DOM hoặc thao tác trực tiếp với DOM (thường dùng nhất).compile: Dùng để tiền xử lý DOM template trước khi liên kết với scope.
Trong phần lớn trường hợp, bạn sẽ sử dụng link.
Ví dụ nâng cao: Isolated Scope
app.directive('userCard', function() { return { restrict: 'E', scope: { user: '=' }, template: '<div><h4>{{user.name}}</h4><p>{{user.email}}</p></div>' };
});
<user-card user="person"></user-card> <script> $scope.person = { name: "John Doe", email: "john@example.com" };
</script>
Vì sao dùng = ?
- Vì nó tạo liên kết two-way binding giữa scope cha và directive.
Các Best practice khi sử dụng Directive
- Dùng Isolated Scope: Tránh làm ô nhiễm scope toàn cục
- Tách giao diện thành các component nhỏ
- Không thao tác DOM trong controller, hãy dùng directive
- Đặt tên directive rõ ràng: dùng dash-case trong HTML và camelCase trong JavaScript
- Chỉ định rõ
restrict:'E'cho component,'A'cho hành vi
Kiểm thử Directive trong AngularJS
AngularJS hỗ trợ kiểm thử đơn vị với Karma và Jasmine. Bạn có thể kiểm thử directive bằng cách compile chúng và kiểm tra hành vi độc lập.
Ví dụ kiểm thử:
describe('Directive: helloWorld', function() { var element, scope; beforeEach(module('myApp')); beforeEach(inject(function($rootScope, $compile) { scope = $rootScope.$new(); element = $compile('<hello-world></hello-world>')(scope); scope.$digest(); })); it('should render Hello World', function() { expect(element.html()).toContain("Hello World"); });
});
Kết luận
Directive trong AngularJS là nền tảng giúp xây dựng các component sạch sẽ, có thể tái sử dụng và tương tác tốt. Dù bạn đang sử dụng directive tích hợp sẵn như ng-model hay tạo directive tùy chỉnh với template và logic riêng, việc nắm vững directive sẽ nâng cao đáng kể quy trình phát triển front-end của bạn.
Dù bạn là lập trình viên mới hay đã có kinh nghiệm với AngularJS, việc hiểu rõ cách hoạt động của directive và cách xây dựng chúng sẽ giúp bạn viết những ứng dụng modular, dễ bảo trì và linh hoạt hơn trong các dự án thực tế.