Truy cập các thuộc tính từ một chỉ thị AngularJS

Mẫu AngularJS của tôi chứa một số cú pháp HTML tùy chỉnh như:

<su-label tooltip="{{field.su_documentation}}">{{field.su_name}}</su-label>

Tôi đã tạo một chỉ thị để xử lý nó:

.directive('suLabel', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      title: '@tooltip'
    },
    template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>',
    link: function(scope, element, attrs) {
      if (attrs.tooltip) {
        element.addClass('tooltip-title');
      }
    },
  }
})

Mọi thứ đều hoạt động tốt, ngoại trừ attrs.tooltipbiểu thức, luôn trả về undefined, mặc dù tooltipthuộc tính hiển thị từ bảng điều khiển JavaScript của Google Chrome khi thực hiện a console.log(attrs).

Bất kì lời đề nghị nào?

CẬP NHẬT: Một giải pháp đã được cung cấp bởi Artem. Nó bao gồm việc thực hiện điều này:

link: function(scope, element, attrs) {
  attrs.$observe('tooltip', function(value) {
    if (value) {
      element.addClass('tooltip-title');
    }
  });
}

AngularJS + stackoverflow = Bliss

Xem phần Thuộc tính từ tài liệu về chỉ thị.

quan sát các thuộc tính nội suy : Sử dụng $ quan sát để quan sát sự thay đổi giá trị của các thuộc tính chứa nội suy (ví dụ: src = "{{bar}}"). Điều này không chỉ rất hiệu quả mà còn là cách duy nhất để dễ dàng nhận được giá trị thực tế vì trong giai đoạn liên kết, phép nội suy vẫn chưa được đánh giá và vì vậy giá trị tại thời điểm này được đặt thành không xác định.

Mặc dù sử dụng '@' thích hợp hơn sử dụng '=' cho trường hợp cụ thể của bạn, đôi khi tôi sử dụng '=' để tôi không phải nhớ sử dụng attrs. $ Important ():

<su-label tooltip="field.su_documentation">{{field.su_name}}</su-label>

Chỉ thị:

myApp.directive('suLabel', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            title: '=tooltip'
        },
        template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>',
        link: function(scope, element, attrs) {
            if (scope.title) {
                element.addClass('tooltip-title');
            }
        },
    }
});

Làm biếng .

Với '=', chúng ta nhận được dữ liệu hai chiều, vì vậy cần phải cẩn thận để đảm bảo scope.title không vô tình bị sửa đổi trong chỉ thị. Ưu điểm là trong giai đoạn liên kết, thuộc tính phạm vi cục bộ (scope.title) được xác định.