AngularJS Directives: Tạo các Custom Element và Attribute

Directives là một trong những khái niệm cốt lõi của AngularJS, cho phép bạn mở rộng ngôn ngữ HTML bằng cách tạo ra các custom element và attribute. Chúng cung cấp một cách linh hoạt để tạo ra các thành phần tái sử dụng được và tùy chỉnh hành vi của ứng dụng.

Các loại Directive

AngularJS cung cấp bốn loại directive:

1. Element Directives: Tạo ra các custom element mới.
2. Attribute Directives: Thay đổi hành vi của các element HTML hiện có.
3. Class Directives: Thêm hoặc xóa các class CSS vào một element.
4. Comment Directives: Liên kết với các comment HTML.

Tạo một Directive

Để tạo một directive, bạn sử dụng hàm module.directive(). Hàm này nhận hai tham số: tên của directive và một hàm trả về một đối tượng cấu hình.

JavaScript

angular.module('myApp', [])
  .directive('myDirective', function() {
    return {
      // ... cấu hình directive
    };
  });

Cấu hình Directive

Đối tượng cấu hình có thể chứa các thuộc tính sau:

• restrict: Xác định cách directive có thể được sử dụng. Có thể là ‘E’ (element), ‘A’ (attribute), ‘C’ (class) hoặc ‘M’ (comment).
• template: Một chuỗi HTML dùng để thay thế element mà directive được áp dụng.
• templateUrl: Đường dẫn đến một file HTML chứa template.
• replace: Xác định xem directive có thay thế hoàn toàn element gốc hay không.
• transclude: Cho phép nội dung của element gốc được chuyển vào template của directive.
• scope: Tạo một scope mới cho directive.
• link: Một hàm được gọi sau khi directive được liên kết với DOM.

Ví dụ: Tạo một Directive Custom Element

JavaScript

angular.module('myApp', [])
  .directive('myCustomElement', function() {
    return {
      restrict: 'E',
      template: '<p>Đây là một custom element!</p>'
    };
  });

HTML

<div ng-app="myApp">
  <my-custom-element></my-custom-element>
</div>

Ví dụ: Tạo một Directive Attribute

JavaScript

angular.module('myApp', [])
  .directive('highlight', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.css('background-color', 'yellow');
      }
    };
  });

HTML

<div ng-app="myApp">
  <p highlight>Đây là đoạn văn được highlight.</p>
</div>

Sử dụng Directives

Để sử dụng một directive, bạn chỉ cần thêm nó vào HTML. Nếu nó là một custom element, bạn sử dụng tên của directive. Nếu nó là một attribute, bạn thêm nó vào element.

Tạo các Directive Phức Tạp Hơn

Bạn có thể tạo ra các directive phức tạp hơn bằng cách sử dụng các thuộc tính cấu hình khác nhau. Ví dụ, bạn có thể sử dụng transclude để chuyển nội dung của element gốc vào template, hoặc sử dụng link để thực hiện các thao tác trên DOM.