16

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

    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>

ありがとう

4

5 に答える 5

23

使用$observe:

補間された属性の観察 : 補間$observeを含む属性の値の変化を観察するために使用します (例: src="{{bar}}")。これは非常に効率的であるだけでなく、実際の値を簡単に取得する唯一の方法でもあります。これは、リンク段階では補間がまだ評価されておらず、この時点で値が に設定されているためundefinedです。--ディレクティブ ドキュメント

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

@FMM がコメントで言及されているようにdata、属性名を正規化するときに Angular によって削除されるため、 .keyではなく上記を使用しますdataKey。

于 2013-04-30T16:08:31.830 に答える
10

試してくださいattrs["dataKey"]- これは、html がダッシュ ( -) で属性を解析する方法です。の代わりにスコープからの値が必要な場合は、次の{{something}}2 つのことを行うことができます。

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

$interpolateまたは、同じように使用できます$parseが、{{}}

于 2013-04-30T12:55:29.063 に答える
4

angularはすべての属性から「data-」を取り除くため、属性が「data-key」の場合は、「dataKey」ではなく「key」を使用してください

于 2015-05-18T18:36:47.730 に答える
1

attrs パラメーターを取得するディレクティブのリンク関数内にいる場合は、オブジェクト表記を使用することをお勧めします。

attrs.yourAttributeName

于 2014-11-25T15:56:31.990 に答える