การเข้าถึงแอตทริบิวต์จากคำสั่ง AngularJS

เทมเพลต AngularJS ของฉันมีไวยากรณ์ HTML ที่กำหนดเองเช่น:

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

ฉันสร้างคำสั่งเพื่อประมวลผล:

.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');
      }
    },
  }
})

ทุกอย่างทำงานได้ดียกเว้นattrs.tooltipนิพจน์ซึ่งจะส่งคืนเสมอundefinedแม้ว่าtooltipแอตทริบิวต์จะมองเห็นได้จากคอนโซล JavaScript ของ Google Chrome เมื่อทำไฟล์console.log(attrs).

ข้อเสนอแนะใด ๆ ?

อัปเดต: Artem นำเสนอโซลูชัน ประกอบด้วยในการทำสิ่งนี้:

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

AngularJS + stackoverflow = ความสุข

ดูส่วนคุณสมบัติจากเอกสารเกี่ยวกับคำสั่ง

การสังเกตแอตทริบิวต์ที่ถูกแก้ไข : ใช้ $ สังเกตเพื่อสังเกตการเปลี่ยนแปลงค่าของแอตทริบิวต์ที่มีการแก้ไข (เช่น src = "{{bar}}") สิ่งนี้ไม่เพียง แต่มีประสิทธิภาพมากเท่านั้น แต่ยังเป็นวิธีเดียวที่จะได้รับค่าจริงอย่างง่ายดายเนื่องจากในระหว่างขั้นตอนการเชื่อมโยงการแก้ไขยังไม่ได้รับการประเมินดังนั้นค่าจึงถูกตั้งค่าเป็นไม่ได้กำหนด

แม้ว่าการใช้ '@' จะเหมาะสมกว่าการใช้ '=' สำหรับสถานการณ์เฉพาะของคุณ แต่บางครั้งฉันก็ใช้ '=' เพื่อที่ฉันจะได้ไม่ต้องจำว่าต้องใช้ attrs $ สังเกต ():

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

คำสั่ง:

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');
            }
        },
    }
});

ซอ .

ด้วย '=' เราได้รับการเชื่อมโยงฐานข้อมูลแบบสองทางดังนั้นจึงต้องใช้ความระมัดระวังเพื่อให้แน่ใจว่าขอบเขตไม่ได้ถูกแก้ไขโดยไม่ได้ตั้งใจในคำสั่ง ข้อดีคือในระหว่างเฟสการเชื่อมโยงคุณสมบัติขอบเขตโลคัล (scope.title) ถูกกำหนด