AngularJS Directive: viết code một cái cho biết chơi
Ơ! Thế AngularJS directive là gì thế? Nói đơn giản thế này nhé: AngularJS directive giúp cho chúng ta mở rộng khả năng của ngôn ngữ HTML hay nói cách khác là nó giúp cho những người coder như chúng ta làm cho HTML mạnh thêm. Làm một cái ví dụ cho dễ hiểu, ta có đoạn HTML đơn giản như bên dưới ...
Ơ! Thế AngularJS directive là gì thế?
Nói đơn giản thế này nhé: AngularJS directive giúp cho chúng ta mở rộng khả năng của ngôn ngữ HTML hay nói cách khác là nó giúp cho những người coder như chúng ta làm cho HTML mạnh thêm. Làm một cái ví dụ cho dễ hiểu, ta có đoạn HTML đơn giản như bên dưới chẳng hạn
<span>Tập viết AngularJS Directive tí chơi</span>
Bạn thử hình viễn cảnh đen tối sau qua đoạn đối thoại sau:
Khách hàng (biết tí HTML): “Ê! Tao muốn đảo ngược nội dung một thẻ span”
Culi cao cấp nghĩ: “Dễ thôi! Mở code lên sửa thôi pa”
Khách hàng (chém tiếp): “Tao muốn trong code HTML thì thứ tự nó bình thường nhưng khi hiện lên trình duyệt thì nó mới đảo ngược nội dung á.”
Culi cao cấp chửi: “Ơ! Thằng này chơi cắc cớ.”
Khách hàng (bồi thêm cú chót): “Nhưng mày làm sao khi nào tao chỉ định thì thẻ span đó mới đảo chiều. Còn không thì nó hiện ra bình thường nhé.”
Culi cao cấp lèm bèm: “Rồi. Ngặm xương”
Ok! Chúng ta có nhiều giải pháp. Chúng ta có thể gán cho thẻ span một class nào đó, ví dụ như class=”dao-nguoc-noi-dung” chẳng hạn. Sau đó, chúng ta dùng jQuery lấy tất cả các thẻ span này lên và đảo chiều nội dung đó. Ví dụ như đoạn html sau:
<span class="dao-chieu-noi-dung">Tập viết AngularJS Directive tí chơi</span>
Trong trường hợp này giá như mà ta có thể thêm attribute cho html, đại loại như đoạn mã html bên dưới:
<span dao-chieu-noi-dung>Tập viết AngularJS Directive tí chơi</span>
Mình chỉ cần thêm attribute dao-chieu-noi-dung thì nội dung của thẻ span đó tự động đảo chiều. Ok! Nếu chúng ta có mong muốn như vậy thì AngularJS sẽ giúp được điều này cho chúng ta.
Để có thể viết được directive, Góc Kinh Nghiệm giả sử bạn đã biết cơ bản về AngularJS. Ok! Giờ thì tiến hành viết cái directive dao-chieu-noi-dung (đảo chiều nội dung) của chúng ta thôi.
Bước 1: Tạo controller. Góc Kinh Nghiệm đặt nó vào file controllers.js
var modules = angular.module('LabApp', []);
modules.controller('LabCtrl', function ($scope, $http) {
});
Bước 2: Thêm directive đảo chiều nội dung vô. Viết tiếp trong file controllers.js
var modules = angular.module('LabApp', []);
modules.controller('LabCtrl', function ($scope, $http) {
});
modules.directive('daoChieuNoiDung', function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var words = elem.text().split(' ');
var l = words.length;
var str = "";
for (var i = l - 1; i > 0; i--)
{
str += " " + words[i];
}
elem.text(str);
}
}
});
Bước 3: Một đoạn html để test
<!DOCTYPE html>
<html ng-app="LabApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="awidth=device-awidth" />
<title></title>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/controllers.js"></script>
</head>
<body>
AngularJS Lab
<div ng-controller="LabCtrl">
<span dao-chieu-noi-dung>
tôi tên là Góc Kinh Nghiệm
</span>
</div>
</body>
</html>
Các bạn nhớ include file angular.js và file controllers.js của các bạn vô. Khi các bạn chạy đoạn chương trình lên thì sẽ thấy đoạn text trong thẻ span này đảo ngược nội dung
Ok. Tổng hợp thông tin lại chút xíu:
– Mình đã hiểu directive trong AngularJS là gì
– Trong đoạn mã directive trên, chúng ta có option restrict. Option này giúp cho chỉ định directive của chúng ta sẽ được dụng dạng element, attribute hay là dạng class. Những giá trị hợp lệ cho restrict như sau
‘A’ – Attribute (Chúng ta sẽ sử dụng như <span dao-chieu-noi-dung>)
‘E’ – Element (Use it as <dao-chieu-noi-dung>)
‘C’ – Class. (Use it like <div class=”dao-chieu-noi-dung”>)
‘M’ – Comment (Use it like <!– directive: dao-chieu-noi-dung –>
Còn rất nhiều thứ về directive chúng ta cần tìm hiểu. Chúng ta sẽ cùng tìm hiểu từ từ qua các bài viết
