Tạo một custom AngularJS directives cho người mới bắt đầu

Bài đăng này đã không được cập nhật trong 7 năm

Directives là một trong những thành khái niệm quan trọng nhất để có thể nắm rõ được AngualarJs. Directives là một thành phần mở rộng HTML, hay nói cách khác là các thuộc tính (properties) của các thẻ HTML mà Angular nó định nghĩa thêm. AngularJs có định nghĩa sẵn khá nhiều directives, các directives này thường bắt đầu bằng tiền tố ng. Ngoài ra, AngularJs cũng cho chúng ta custom các directive theo ý mình. Một custom directive đơn giản là thay thế những thành phần cho nó được kích hoạt. Ứng dụng AngularJS trong quá trình khởi tạo tìm kiếm những thành phần phù hợp và hoạt động một lần sử dụng phương thức compile() trong custom directive sau đó sử dụng phương thức link() để tạo custom directive dựa vào scope của các directive. Giờ chúng ta sẽ bắt đầu với 1 directive đơn giản như To-do list:

Trước tiên, mình muốn tạo một thành phần HTML mà trình duyệt chưa hỗ trợ, như To-do list:

<my-todo list="todo" title="Angular Todo"></my-todo>

Nếu bạn chạy dòng code này ở bất kì trình duyệt nào thì nó đều không thể hiểu được. Chúng ta phải sử dụng Angular để dạy cho trình duyệt làm cách nào để dịch được phần tử HTML mới có tên là "my-todo" này. Chúng ta sẽ làm điều đó bằng cách định nghĩa ra một directive mới với các thuộc tính của nó.

Nào, chúng ta sẽ khởi tạo app và directive của nó. Tạo mới một file với tên là 'script.js'

var app = angular.module('myApp', []);
app.directive('myTodo', function(){
    return {
      restrict: 'EA',
      templateUrl: 'todo.tpl.html',
      scope: {
        list: '=',
        title: '@'
      }
    };
  });

Giờ chúng ta sẽ giải thích các thành phần được khai báo ở trên:

1. Restrict

Thuộc tính restrict sẽ nói với Angular rằng cách mà chúng ta tạo ra một directive bằng cách sử dụng các kí tự 'E, A, C, M' . Mỗi kí tự có 1 ý nghĩa riêng của nó:

Restrict	Ý nghĩa	Ví dụ
E	Ngụ ý rằng sẽ sử dụng directive như một thành phần HTML mới	<my-todo list="todo" title="Element"> </my-todo>
A	Directive sẽ tiếp nhận bất kì thành phần HTML nào có một thuộc tính phù hợp với tên directive
C	Chỉ ra rằng directive sẽ được tìm thấy trong các CSS class
M	Phù hợp với các comment HTML	<!--directive:my-todo attributes goes here-->

Nhìn lại ví dụ bên trên, chúng ta khai báo restrict: 'EA', có nghĩa là nó sẽ phù hợp với ất kì thành phần nào với directive như là một thuộc tính, và cũng có có ý nghĩa là sẽ phụ hợp với bất kì thành phần nào định nghĩa directive.

2. Template

Hiểu đơn giản template là đoạn code HTML mà chúng ta sẽ sử dụng nhiều lần với giá trị truyền vào sẽ khác nhau. Ở đây, mình sẽ sử dụng template todo.tpl.html với nội dung như sau:

<h1>{{title}}</h1>
<div ng-repeat="todo in list">
<input type="checkbox" ng-model="todo.completed"> {{todo.name}}
</div>

3. Scope

'Scope' là định nghĩ then chốt để có thể hiểu rõ Angular. Scope là cầu nối giữu Javascript và HTML để có thể thay thế các giá trị hiển thị trên HTML với giá trị thực của nó (real values, real time). Ở đây, chúng ta có sử dụng scope:

scope: {
list: '=',
title: '@'
}

Giải thích về 2 kí tự = và @:

=: Liên kết giữa giá trị của biểu thức và giá trị kí tự. Nó có nghĩa là nếu chúng ta có thuộc tính list="todo" và todo tương đương với 5, thì nó sẽ thay thế giá trị 5 chứu không phải là text "todo". Trong trường hợp này, "todo" là arrays của các tasks.
@: Ngụ ý rằng giá trị của thuộc tính có cùng tên trong HTML sẽ được thông qua như là 1 chuỗi.

4. Controller

Nhiệm vụ chính của controller là khởi tạo các giá trị cho scope và xử lý các hoạt động thông qua các functions. Chúng ta sẽ sử dụng controller để định nghĩa "todo" list, cái mà chúng ta muốn để render với các directive được khởi tạo. Cách mà chúng ta tạo ra controllers đó là thêm controller vào Angular app instance. Giờ chúng ta thêm đoạn code sau vào app.js:

app.controller('main', function($scope){
$scope.todo = [
  {name: 'Create a custom directive', completed: true},
  {name: 'Learn about restrict', completed: true},
  {name: 'Master scopes', completed: false}
];
});

5. To-do directive

Chúng ta đã chuẩn bị cho directive các thành phần sau:

“myApp” module
“myTodo” directive
“todo.tpl.html” template
“main” controller Giờ là lúc chúng ta thêm các đoạn code để hoành chỉnh một directive: Tạo trang index.html với nội dung như sau:

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
   <script src="script.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="main">
  <my-todo list="todo" title="Angular To-do"></my-todo>
    </div>
  </body>
</html>

Mọi người có thể thấy chúng ta gọi directive ra bằng cách sử dụng thẻ HTML: <my-todo></my-todo>, và truyền các giá trị cần thiết vào. Đây cũng là cách gọi các custom directives trong AngularJs.

Trên đây là cách tạo 1 custom directives trong AngularJs đành cho các bạn beginner mà mình tìm hiểu được. Mong rằng nó sẽ giúp các bạn tự tin hơn khi tìm hiểu về Angular!!!

1. Restrict

2. Template

3. Scope

4. Controller

5. To-do directive

Mục lục