AngularJS Directive

Trong các phần trước chúng ta đã có dịp làm việc với chỉ thị AngularJS (hay AngularJS directive). Phần này chúng ta sẽ tìm hiểu chi tiết hơn về nó.

Lưu ý: Hai thuật ngữ AngularJS directivechỉ thị AngularJS có thể sử dụng để thay thể cho nhau.

AngularJS directive là gì

Thư viện AngularJS cho phép chúng ta mở rộng mã lệnh của trang HTML thông qua thuộc tính của phần tử. Trong AngularJS các thuộc tính này được gọi là các directive.

Thư viện AngularJS cung cấp một số directive có sẵn. Ngoài ra, chúng ta cũng có thể tự mình định nghĩa thêm các directive sử dụng trong ứng dụng.

Một số AngularJS directive có sẵn

Các directive có sẵn trong AngularJS được bắt đầu bởi tiếp đầu ngữ ng-. Ví dụ như các directive ng-app, ng-init hay ng-bind mà chúng ta đã làm việc với ở các bài học trước.

<div ng-app="" ng-init="name='?'">

<p>Nhập vào tên bạn: <input type="text" ng-model="name"></p>
<p>Tên bạn là: {{ name }}</p>

</div>

Chạy

Ý nghĩa của các chỉ thị có sẵn trong AngularJS.

  • ng-app: Khai báo ứng dụng AngularJS
  • ng-init: Khởi tạo dữ liệu sử dụng trong ứng dụng AngularJS
  • ng-model: bind giá trị hiển của các trường dữ liệu trong trang HTML (thẻ input, thẻ textarea) với dữ liệu của ứng dụng AngularJS

Ngoài ra, chỉ thị ng-appcòn đánh dấu phần tử nào của HTML đang sở hữu ứng dụng AngularJS.

Data Binding

Ở ví dụ trên chúng ta đã bind (gắn) giá trị của một trường nhập dữ liệu input trong trang HTML với giá trị của biến trong AngularJS thông qua việc sử dụng chỉ thị ng-model kết hợp với biểu thức {{ name }}.

Việc gắn giá trị của biến trong ứng dụng AngularJS với giá trị của biểu thức AngularJS như trên được gọi là Data Binding. Hay nói cách khác biểu thức {{ name }}được gắn kết với thị ng-model="firstName".

Ở ví dụ dưới đây chúng ta sử dụng data binding ở 2 trường nhập dữ liệu khác nhau:

<div ng-app="" ng-init="quantity=1;price=5">

<p>Số lượng: <input type="number"   ng-model="quantity"></p>
<p>Giá:    <input type="number" ng-model="price"></p>

<p>Tống giá: {{ quantity * price }}</p>

</div>

Chạy

Lặp lại mã lệnh HTML

Sử dụng chỉ thị ng-repeat cho phép chúng ta lặp lại một (hoặc một số) đoạn mã HTML một số lần nhất định. Ví dụ:

<div ng-app="" ng-init="names=['Tí','Tèo','Chí', 'Phèo']">
  <ul>
    <li ng-repeat="x in names">
      Tên tôi là: {{ x }}
    </li>
  </ul>
</div>

Chạy

Ở ví dụ trên thì chỉ thị ng-repeat trong AngularJS có tác dụng sao chép đoạn mã của thẻ <li> số lần đúng bằng số phần tử trong mảng names (ở đây là 4 lần).

Tạo chỉ thị mới

Ngoài những chỉ thị có sẵn trong AngularJS bạn cũng có thể tự tạo các chỉ thị trong ứng dụng AngularJS. Việc tạo chỉ thị mới được thực hiện bằng cách sử dụng phương thức .directive.

var app = angular.module("myApp", []);
app.directive("myTestDirective", function() {
  // mã lệnh được thực thi khi "gọi" chỉ thị
});

Đoạn code ở trên tạo ra 1 chỉ thị với tên là myTestDirective cũng chính là đối số đầu tiên trong phương thức directive. Đối số thứ 2 là 1 hàm callback (hàm callback thường không có tên). Hàm này sẽ được gọi khi chúng ta gọi chỉ thị.

Chỉ thị có thể được gọi thông qua 3 cách khác nhau:

  • Sử dụng phần tử HTML. Ví dụ <w3-test-directive></w3-test-directive>
  • Sử dụng thuộc tính HTML. Ví dụ <div w3-test-directive></div>
  • Sử dụng tên lớp CSS. Ví dụ <div class="w3-test-directive"></div>
  • Sử dụng HTML comment. Ví dụ <!-- directive: w3-test-directive -->

Gọi chỉ thị AngularJS sử dụng phần tử HTML

Chúng ta hãy tham khảo một ví dụ gọi chỉ thị tự tạo trong AngularJS sử dụng phần tử HTML như sau:

<my-test-directive></my-test-directive>

<script>
var app = angular.module("myApp", []);
app.directive("myTestDirective", function() {
    return {
        template : "<h1>Phần tử được tạo ra nhờ gọi chỉ thị myTestDirective!</h1>"
    };
});
</script>

Chạy

Bạn lưu ý khi đặt tên cho chỉ thị AngularJS, bạn cần lưu ý in hoa chữ cái đầu tiên của từ để phân biệt các từ với nhau myTestDirective (trừ từ đầu tiên là không cần in hoa chữ cái đầu). Kiểu viết này còn được gọi là kiểu chữ con lạc đà hay camel case.

Ngược lại khi đặt tên cho phần tử HTML thì bạn cần chuyển các chữ cái in hoa này thành chữ in thường và sử dụng ký tự - ở trước mỗi từ để phân biệt các từ với nhau my-test-directive (tương tự từ đầu tiên không cần phải đặt - ở trước nó).

Gọi chỉ thị AngularJS sử dụng thuộc tính của phần tử HTML

<div my-test-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("myTestDirective", function() {
    return {
        template : "<h1>Phần tử được tạo ra nhờ gọi chỉ thị myTestDirective!</h1>"
    };
});
</script>

Chạy

Gọi chỉ thị AngularJS sử dụng lớp CSS


<div class="my-test-directive"></div>

<script>
var app = angular.module("myApp", []);
app.directive("myTestDirective", function() {
    return {
        restrict : "C",
        template : "<h1>Phần tử được tạo ra nhờ gọi chỉ thị myTestDirective!</h1>"
    };
});
</script>

Chạy

Gọi chỉ thị AngularJS sử dụng comment trong HTML

<!-- directive: my-test-directive -->

<script>
var app = angular.module("myApp", []);
app.directive("myTestDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>Phần tử được tạo ra nhờ gọi chỉ thị myTestDirective!</h1>"
    };
});
</script>

Chạy

Giới hạn việc gọi chỉ thị (restrict)

Để giới hạn việc gọi chỉ thị chúng ta sử dụng thuộc tính restrict . Ví dụ:

<my-test-directive></my-test-directive>
<div my-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("myTestDirective", function() {
    return {
        restrict : "A",
        template : "<h1>Phần tử được tạo ra nhờ gọi chỉ thị myTestDirective!</h1>"
    };
});
</script>

Chạy

Ở ví dụ trên bằng việt đặt giá trị thuộc tính restrict: "A" thì chỉ chỉ myTestDirective chỉ có thể được gọi thông qua việc sử dụng thuộc tính HTML. Chữ A chính là viết tắt của từ attribute (hay thuộc tính).

Thộc tính result có thể nhận các giá trị sau (tương ứng với 1 trong :

  • restrict="E": Đặt giá trị cho thuộc tính restrictE để gọi chỉ thị AngularJS thông qua phần tử HTML (element).
  • restrict="A": Đặt giá trị cho thuộc tính restrictAđể gọi chỉ thị AngularJS thông qua thuộc tính của phần tử HTML (attribute).
  • restrict="C": Đặt giá trị cho thuộc tính restrictCđể gọi chỉ thị AngularJS thông qua lớp CSS (class).
  • restrict="M": Đặt giá trị cho thuộc tính restrictMđể gọi chỉ thị AngularJS thông qua HTML comment.

Nếu thuộc tính này không xuất hiện thì có nghĩa chỉ thị sẽ nhận giá tị là AE nghĩa là có thể được gọi thông qua sử dụng thuộc tính của phần tử HTML hoặc thông qua sử dụng phần tử HTML.

AngularJS JavaScript
Thêm Bình Luận: