Bir AngularJS yönergesinden özniteliklere erişim

AngularJS şablonum, aşağıdakiler gibi bazı özel HTML sözdizimi içerir:

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

İşlemek için bir yönerge oluşturdum:

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

Her şey düzgün çalışıyor, attrs.tooltipher zaman dönen ifade dışında undefined, tooltipöznitelik bir console.log(attrs).

Herhangi bir öneri?

GÜNCELLEME: Artem tarafından bir çözüm önerildi. Bunu yapmaktan ibaretti:

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

AngularJS + stackoverflow = mutluluk

Bölüm bakın Öznitelikler'i direktifleri üzerine belgelerinden.

enterpolasyonlu öznitelikleri gözlemleme: Enterpolasyon içeren özniteliklerin değer değişikliklerini gözlemlemek için $ observe kullanın (ör. src = "{{bar}}"). Bu çok verimli olmakla kalmaz, aynı zamanda gerçek değeri kolayca elde etmenin tek yoludur, çünkü bağlama aşaması sırasında enterpolasyon henüz değerlendirilmemiştir ve bu nedenle değer şu anda tanımsız olarak ayarlanır.

Özel senaryonuz için '@' kullanmak '=' kullanmaktan daha uygun olsa da, bazen '=' kullanıyorum böylece attr'ları kullanmayı hatırlamak zorunda kalmam. $ Observe ():

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

Direktif:

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

Keman .

'=' İle iki yönlü veri bağlama elde ederiz, bu nedenle kapsam.title'ın yönergede yanlışlıkla değiştirilmemesini sağlamak için özen gösterilmelidir. Bunun avantajı, bağlama aşaması sırasında yerel kapsam özelliğinin (kapsam.başlık) tanımlanmış olmasıdır.