AngularJsディレクティブ - ディレクティブ内から属性値を取得する方法

Question

ディレクティブの内部から属性値にアクセスする方法はありますか？

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コードです：

<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> 

おかげ

Answer 1

と同じよう$interpolateを使用することができます：

補間観察が属性：補間を含む属性の値の変化を観察するために使用$observeを（例えば、 src="{{bar}}"）。これは非常に効率的であるだけでなく、実際の値を簡単に取得する唯一の方法でもあります。リンクフェーズではまだ補間が評価されていないため、この時点で値はundefinedに設定されています。 - directives doc

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

@FMMコメントで述べたように、それはむしろdataKeyより上記keyの従って使用、属性名を正規化するとき、data、角度によって剥離されます。

Answer 2

attrs["dataKey"]を試してみてください - これは、HTMLがダッシュ（-）と属性を解析する方法です。あなたの代わりに{{something}}の範囲から値をしたい場合 に、あなたは二つのことを行うことができます。

scope[attrs['dataKey']]を - 動作しますが、この

を行うか$parseを使うべきではありませんが、その後{{ ``使用しないでください}} `

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

またはあなたが使用$observe$parseのようなものの{{}}

Answer 3

私あなたがattrsになるディレクティブのリンク機能、内部にある場合は、オブジェクトの表記法を使用することをお勧めします：

Answer 4

角度ストリップ「データ - 」は任意の属性をオフ、もしそうであれば

attrs.yourAttributeNameをあなたの属性は 'data-key'です。 'dataKey'ではなく 'key'を使用してください。