AngularJS – Custom Directives: Tạo các thành phần tùy chỉnh

Custom directives trong AngularJS là một cách mạnh mẽ để mở rộng ngôn ngữ HTML và tạo ra các thành phần tái sử dụng được. Chúng cho phép bạn định nghĩa các element và attribute mới và tùy chỉnh hành vi của chúng.

Tạo một Custom Directive

Để tạo một custom 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('myCustomDirective', 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 (E: element, A: attribute, C: class, 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 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 Custom 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 Custom Directives

Để sử dụng một custom 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 Custom Directive Phức Tạp Hơn

Bạn có thể tạo ra các custom 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.

Ưu điểm của Custom Directives

• Tái sử dụng mã: Tạo các thành phần tái sử dụng được.
• Tùy chỉnh giao diện và hành vi: Tạo các element và attribute tùy chỉnh.
• Mở rộng khả năng của AngularJS: Tạo các tính năng mới cho ứng dụng.