AngularJS Directive: option templateUrl dùng để làm gì?
Tiếp tục chuỗi tìm hiểu AngularJS directive. Trong bài viết trước, Góc Kinh Nghiệm đã chia sẻ về option template trong việc phát triển directive. Option template giúp cho chúng ta định đạng format html sẽ trả về cho view, giúp cho code của chúng ta nhìn sạch sẽ gọn gàng hơn. Thế bây giờ giả sử ...
Tiếp tục chuỗi tìm hiểu AngularJS directive. Trong bài viết trước, Góc Kinh Nghiệm đã chia sẻ về option template trong việc phát triển directive. Option template giúp cho chúng ta định đạng format html sẽ trả về cho view, giúp cho code của chúng ta nhìn sạch sẽ gọn gàng hơn.
Thế bây giờ giả sử tình huống như thế này. Bạn có một cấu trúc html giống nhau, cấu trúc html này được sử dụng trong nhiều directive khác nhau, giả sử như template giống nhau này được sử dụng trong 9 directive khác nhau. Một ngày đẹp trời nào đó, khách hàng muốn sửa cấu trúc html của 9 directive này, điều này quả thật là một cơn ác mộng. Chúng ta phải mò vô code sửa lại 9 directive này.
Để giúp chúng ta thoát khỏi tình huống này thì option templateUrl là lựa chọn tốt nhất. Chín directive như đã đề cập chỉ cần load cùng một template vào sử dụng. Khi khách hàng hay chính chúng ta có yêu cầu sửa template hàng loạt thì ta chỉ cần sửa đúng một file là OK.
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: Tạo file template MyTemplate.html và đặt code html vào đó
<span>{{words}}</span>
Bước 3: Thêm directive đảo chiều nội dung vô. Viết tiếp trong file controllers.js
modules.controller('LabCtrl', function ($scope, $http) {
});
modules.directive('daoChieuNoiDung', function () {
return {
restrict: 'A',
templateUrl:'../MyTemplate.html',
transclude: true,
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 4: 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! Tóm tắt lại chút xíu
Thứ 1: Không như bài viết về option template, lần này chúng ta dùng templateUrl. Thay vì code html để trong directive thì chúng ta để trong file MyTemplate.html và load nó vô. Sau này muốn chỉnh sửa gì thì chúng ta chỉ cần chỉnh sửa file này là được, không cần mò vô code sửa. Và nếu MyTemplate.html được sử dụng nhiều chỗ thì nó sẽ update toàn bộ
Thứ 2: Các bạn lưu ý đường dẫn đến file MyTemplate.html của mình khác các bạn, các bạn cần sửa lại đường dẫn cho phù hợp với vị trí file trên máy các bạn
Vậy là khi đến vài viết này chúng ta đã hiểu về các option: restrict, template và templateUrl
