AngularJS Directive Best Practices

Sử dụng Directives trong AngularJS là một trong những tính năng tuyệt vời. Nó rằng buộc các giá trị của HTML, dữ liệu của app và cả các thành phần HTML của web-app. Điều đó giúp chúng ta giảm thiểu được số lượng thẻ HTML, code HTML -> project của chúng ta sẽ gọn gàng hơn. Và đặc biệt nó có thể tái sử dụng và maintain rất dễ dàng.

Bạn có thể nghĩ: một directive là một extension của HMLT, điều đó có nghĩa bạn có thể tạo ra các elements và attributes riêng, chỉ các bạn mới có. Giống như khi bạn sử dụng một thẻ "<select>", bạn mong đợi sẽ thấy một element có thể click được vào và sổ ra một list các items. Như vậy một thẻ HTML định nghĩa một chức năng nhất định nào đó, nhưng với một directive thì nó có thể cho phép bạn tạo ra một thẻ HTML với chức năng mà bạn định nghĩa ra, thật tuyệt vời phải không nào

Ở đây tôi sẽ lấy một ví dụ show ra một list các danh sách các member của Framgia Việt Nam. Bình thường các bạn phải viết nhiều đoạn HTML/code HMTL để có thể show ra danh sách đó, thế nhưng ở đây tôi chỉ viết

<framgia-member></framgia-member>

Thật tuyệt vời đúng ko? đấy chính là directive mà tôi muốn nói ở đây.

Tuy chỉ viết đoạn code HTML như trên nhưng thực chất mà bạn thấy trên web-app là cả một list các danh sách các members(có thể có những chi tiết đi kèm khác với mỗi members)

Dưới đây là link ví dụ hướng dẫn cách các bạn tạo ra một directive của riêng mình: Link Plunker

"<framgia-member>" được liên kết với một file HMLL, nó là template của directive, trong đó các thẻ HTML nhưng đã được định nghĩa theo ý muốn của các bạn.

Và một điều lưu ý khi đặt tên các thẻ directive, ví dụ

<members>

Nếu các bạn sử dụng HTML5 thì nó hiểu là một thẻ nào đó của HTML chứ ko phải là directive mà các bạn định nghĩa ra. Các bạn nên viết:

<myapp-members>

Khi bạn khai báo như ở trên thì bạn phải có một file định nghĩa cho cái directive đó. Ví dụ tôi đặt nó ở trong file directive.js:

var myDirectives = angular.module('myDirectives', []);

myDirectives.directive('framgiaMembers', function() {
  return {
    restrict: 'AE',
    controller: FramgiaMemberController,
    templateUrl: 'framgia-member.template.html',
    link: function postLink(scope, iElement, iAttrs) { ... }
  };
});

• restrict: khai báo xem directive nào sẽ được sử dụng. Ở đây chúng ta thấy EA, A là cho Attribute và E là Element.
• controller: khai báo controller mà directive sử dụng để thao tác với dữ liệu.
• templateUrl: khai báo template HTML mà directive sử dụng.
• link: lập trình thay đổi kết quả phù hợp với phần tử DOM, thêm các sự kiện và thiết lập dữ liệu ràng buộc.

Khi bạn gọi directive trong HTML bạn có thể dụng theo nhiều cách, không chỉ theo cách khai báo giống thẻ.

<div my-directive></div>

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

Directive for reusable code

Khi bạn muốn pass một dữ liệu nào đó get từ controller ra HTML (directive's template) có thể sử dụng biến scope của directive mà phải scope của controller mặc định. Ví dụ ở đây ta sử dụng biến "member", biến này sẽ được gán bởi biến của controller "framgiaVipMember". Ta khai báo thẻ directive như sau:

<framgia-members member="framgiaVipMember"></div>

directive.js:

myDirectives.directive('framgiaMembers', function() {
  return {
    restrict: 'AE',
    scope: {
      member: '='
    },
    templateUrl: 'framgia-member.template.html'
  };
});

Dấu "=" có nghĩa là gán member attribute vào trong template và bạn có thể sử dụng nó như một variable.

controller.js

var linkrControllers = angular.module('myControllers', []);

linkrControllers.controller('FramgiaMemberController', function($scope) {
  $scope.framgiaVipMember = {
    name: 'Jimmy Tr',
    age: '24',
    position: 'Engineer'
  };
});

framgia-member.template.js

<div class="framgia-members">
  <div>Name: {{member.name}}</div>
  <div>Age: {{member.age}}</div>
  <div>Position: {{member.position}}</div>
</div>

Bạn hoàn toàn có thể không sử dụng scope của directive, bạn có thể sử dụng trực tiếp sử dụng scope của controller.

Như vậy, các bạn đã có một directive riêng cho mình. Hãy thử tạo riêng cho bạn ở đây nhé.

Link Plunker