Example Directive on Angularjs
Áp dụng directive vào xây dựng ứng dụng đơn giản.
Directive trong Angularjs có thể được sử dụng để xử lý các hành động cho ứng dụng ở front-end. Bài viết này sẽ giới thiệu cách sử dụng directive để thực hiện các chức năng thêm sửa xóa sản phẩm trong quản lý hàng hóa.
Mô tả bài toán
Giả sử chúng ta cần xây dựng các chức năng thêm sửa xóa, tính tổng tiền các sản phẩm ở ứng dụng quản lý hàng hóa bao gồm một danh sách liệt kê các sản phẩm, mỗi sản phẩm có số lượng, đơn giá, vat, tổng tiền. Giao diện danh mục sản phẩm như sau:
Trong ví dụ ở trên, người dùng có thể nhập vào tên sản phẩm, số lượng, đơn giá và thuế vat của sản phẩm vào form. Ở màn hình hiển thị người dùng có thể Edit. Khi nhấn vào Edit thì có thể chỉnh sửa thông tin rồi Save hoặc Cancel.
Cuối cùng khi nhấn vào Delete thì xóa sản phẩm ra khỏi danh sách.
Các bạn có thể tải ví dụ tại địa chỉ ...
Sau khi tải ví dụ về, các bạn thực hiện các lệnh sau để chạy ví dụ ứng dụng quản lý hàng hóa minh họa như ở trên:
$ npm install serve-static
$ npm install connect
$ node server
Các bước thực hiện xây dựng ví dụ minh họa.
- Tạo các file js và html.
file apptable.js chứa các xử lý controller và directive
file index.html để hiển thị giao diện chính
file apptable.html hiển thị vùng giao diện gọi từ apptable.js
File apptable.js:
Controller chứa records mẫu như sau:
$scope.records = [{
id: 'abce-dadfd-edbdhd',
qty: 10,
description: 'item 1',
tax: 0.1,
cost: 6.95
},
{
id: 'abce-dadfd-3333333',
qty: 10,
description: 'item 2',
tax: 0.0,
cost: 9.95
}];Ngoài ra ta tạo biến scope.columns chứa các dữ liệu động, tại đây ta có thể thêm mới trường dữ liệu và ta dùng các ng-repeat để đưa vào filed colums khi muốn hiển thị. Khi ta thay đổi dữ liệu hiển thị thì nó sẽ tự cập nhật trên trang html.
$scope.columns = [
{
name: "description",
label: "Description",
type: "text"
},
{
name: "qty",
label: "Quantity",
type: "number"
},
{
name: "cost",
label: "Cost",
type: "number"
},
{
name: "tax",
label: "Tax",
type: "number",
editable: false
},
{
name: "total",
label: "Total",
type: "expression",
expression: "(1+tax)*cost*qty"
},
]Ở đây ta tạo ra các trường Description với name là description, label là Description và type là text, tương tự các trường Quantity, Cost, trường tax có thêm editable, trường total có thêm expression.
- Khai báo directive: trong directive chứa:
** restrict: 'E', khai báo kiểu element
** templateUrl: chỉ đến đường dẫn chứa tệp khai báo directive
** link: trong link có các function được khai báo để xử lý các hành động như add, remove, edit, delete, getTemplate... làm thay đổi nội dung phần hiển thị của directive.
Ví dụ function add item:
$scope.addItem = function() {
var newItem = {
id: generateUUID(),
qty: 1,
description: '',
cost: 0
};
$scope.records.push(newItem);
$scope.selected = newItem;
},- File apptable.html: thể hiện cách hiển thị lên giao diện thông qua các khai báo trong apptable.js.
Sử dụng ng-repeat đưa các field-columns hiển thị như các trường đã khởi tạo trước đó như description, quantity, ...
bằng cách đưa vào nơi cần hiển thị.
<div>
<table class="table">
<tr>
<th ng-repeat="field in columns"></th>
<th></th>
</tr>
<tr ng-repeat="item in records" ng-include="getTemplate(item)"></tr>
<tr>
<td><a href ng:click="addItem()" class="btn btn-small">Add item</a></td>
<td></td>
<td></td>
<td></td>
<th></th>
<td></td>
</tr>
</table>
<script type="text/ng-template" id="display">
<td ng-repeat="field in columns"></td>
<td>
<button ng-click="editItem(item)">Edit</button>
<button ng:click="removeItem($index)">Delete</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td ng-repeat="field in columns" ng-switch="isExpression(field)">
<input type="" ng-model="item[field['name']]" class="input-small" ng-switch-when="false">
<span ng-switch-when="true"></span>
</td>
<td>
<button ng:click="saveItem($idx)">Save</button>
<button ng:click="reset()">Cancel</button>
</td>
</script>
</div>Sử dụng ng-template với function getTemplate cho mỗi cách hiển thi khác nhau. Khi ở display: thực hiện edit and delete còn khi ở edit: thực hiện chỉnh sửa hoặc cancel.
- File index.html
<!DOCTYPE html>
<html ng-app="apptableExample">
<head>
<title>Return directive</title>
<link href="lib/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="lib/bootstrap/bootstrap-theme.css" rel="stylesheet" />
<script src="lib/angular/angular.js"></script>
<script src="js/apptable.js"></script>
<script type="text/ng-template" id="display"></script>
</head>
<body ng-controller="apptableCtrl">
<apptable records = "records" columns="columns"> </apptable>
<div>Total: </div>
<div>Summary money: </div>
</body>
</html>Tại đây ta thêm directive apptable vào để hiển thị vùng dữ liệu mà directive đó tác động.
Ở đây có thêm vùng để hiển thị tính tổng tiền, function chịu tác động bởi controller bên ngoài directive nên không nằm trong vùng hiển thị tác động của directive.
Bài viết này giới thiệu và hướng dẫn các bước sử dụng directive để xây dựng ứng dụng quản lý sản phẩm đơn giản. Hi vọng nó giúp các bạn áp dụng các custom directive vào các xử lý phức tạp hơn của ứng dụng của mình.