AngularJS Directive: option template dùng để làm gì?
Trong bài viết này chúng ta sẽ cùng tìm hiểu thêm option template trong viết việc viết directive. Nếu các bạn chưa biết gì về directive, thì hãy đọc bài viết về directive của Góc Kinh Nghiệm để hiểu về directive. Việc phát triển AngularJS directive có nhiều option. Trong bài viết trước, chúng ta ...
Trong bài viết này chúng ta sẽ cùng tìm hiểu thêm option template trong viết việc viết directive. Nếu các bạn chưa biết gì về directive, thì hãy đọc bài viết về directive của Góc Kinh Nghiệm để hiểu về directive.
Việc phát triển AngularJS directive có nhiều option. Trong bài viết trước, chúng ta đã tìm hiểu option restrict, hôm nay chúng ta mổ sẻ thêm một option mới, đó là template.
Chúng ta tiếp tục dùng ý tưởng là phát triển một directive dùng để đảo chiều nội dung của thẻ span như trong bài viết đầu tiên về directive
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',
template: '<span>{{words}}</span>',
compile:function (element, attr, transclusionFunc) {
return function (scope, iterStartElement, attr) {
var origElem = transclusionFunc(scope);
var words = origElem.text().split(' ');
var l = words.length;
var str = "";
for (var i = l - 1; i > 0; i--) {
str += " " + words[i];
}
scope.words = 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">
<div dao-chieu-noi-dung>
tôi tên là Góc Kinh Nghiệm
</div>
</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! Chúng ta tổng hợp thông tin lại chút xíu
Thứ nhất: Có một chỗ đáng lưu ý là tại sao Góc Kinh Nghiệm không dùng link mà lại dùng compile. Bởi vì nếu chúng ta dùng link thì khi đó template của chúng ta đã được đưa vào sử dụng. Có nghĩa là link xảy ra SAU KHI template của chúng ta đã được sử dụng. Để hiểu rõ thêm vấn đề, các bạn có thể thử sử dụng link khi đó bạn sẽ thấy element trong link là html trong template chứ không phải là html trong bước 3 của chúng ta. Điều đó có nghĩa là khi chúng ta dùng link thì chúng ta KHÔNG THỂ nào lấy được nội dung “tôi tên là Góc Kinh Nghiệm” vì element của chúng ta là “<span>{{words}}</span>”
Giải pháp của chúng ta sử dụng compile. Tuy nhiên khi sử dụng compile thì link sẽ bị lờ đi không còn được sử dụng. Mọi việc sẽ do compile định đoạt hết ^^
Thứ 2: chúng ta biết thêm tí về template, nó giống như một format được định nghĩa trước. Format này bao gồm cả html thông thường, biến trong scope, directive…và nó sẽ được sử dụng để tạo ra một cấu trúc hoàn chỉnh trả về cho view
Vậy chúng ta đã bổ sung kiến thức về option template cho việc phát triển directive trong AngularJS. Chúng ta có trong tay về restrict, template…
Trong bài viết kế tiếp chúng ta sẽ tìm hiểu option templateUrl. Code vui bạn nhé ^^
