AngularJs yönergeleri - öznitelikler içinden öznitelik değerlerinin nasıl elde edileceği

Question

Öznitelikler içinden yönerge değerlerine nasıl erişilebileceği hakkında bir fikriniz var mı?

angular.module('portal.directives', []) 
     .directive('languageFlag', ['$routeParams', function(params) { 
      return function(scope, element, attrs) { 
       console.log(attrs["data-key"]); // returns undefined 
       console.log(element.attr('data-key')); // returns {{data-key}} 
       angular.element(element).css('border', '1px solid red'); 
      }; 
     }]); 

Html kodu:

<ul> 
    <li ng-repeat="lng in flags"> 
     <a class="lngFlag {{flag.Key}}" data-key="{{flag.Key}}" data-id="{{lng.Id}}" ng-click="changeLangHash({'lng':lng.Id })" language-flag></a> 
    </li> 
</ul> 

Teşekkür

Answer 1

Kullanım $observe:

interpolasyon gözlemleyerek özellikleri: interpolasyon içeren niteliklerin değeri değişiklikleri gözlemlemek için kullanımlar $observe (ör src="{{bar}}"). Sadece bu çok verimli olmakla kalmaz, aynı zamanda gerçek değeri kolayca elde etmenin tek yolu, çünkü bağlantı aşamasında, enterpolasyon henüz değerlendirilmemiştir ve bu nedenle değer bu zamanda undefined olarak ayarlanmıştır. - bu özellik adını, yerine dataKey daha yukarıda key dolayısıyla kullanımı, normalleştirir zaman directives doc

return function(scope, element, attrs) { 
    attrs.$observe('key', function(value) { 
     console.log('key=', value); 
    }); 
} 

bir yorumda bahsedilen @FMM olarak, data Açısal ile sıyrılmıştır.

Answer 2

attrs["dataKey"] deneyin - bu html çizgi (-) ile özelliklerini ayrıştırma yoludur. yerine {{something}} kapsamından değer istiyorsanız, yapabileceğiniz iki şey:

scope[attrs['dataKey']] - çalışacaktır ancak `kullanmayın sonra bu

yapmak ya $parse kullanmak ancak olmamalıdır` {{ }} `

app.directive('languageFlag', ['$routeParams','$parse', function(params,$parse) { 
    return function(scope, element, attrs) { 
    var value = $parse(attrs.dataKey)(scope); 
    console.log(value); 
    angular.element(element).css('border', '1px solid red'); 
    }; 
}]); 

veya aynı yolu $parse gibi ama $interpolate kullanabilirsiniz {{}}

Answer 3

Sana attrs parametresini alır direktifin bağlantı işlevinin içinden ise nesne gösterimi kullanılarak öneririm:

Answer 4

açısal şeritler 'veriye' hiçbir özelliğe kapalı, eğer öyleyse

attrs.yourAttributeName özniteliğiniz 'data-key', 'dataKey' değil 'dataKey' seçeneğini kullanın, 'dataKey' değil