Директивы AngularJs - как получить значения атрибутов изнутри директивы

Любая идея, как получить доступ к значениям атрибутов изнутри директивы?

    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>

Спасибо

Ответы

Ответ 1

Используйте $observe:

Наблюдение интерполированных атрибутов: используйте $observe для наблюдения за изменениями значений атрибутов, которые содержат интерполяцию (например, src="{{bar}}"). Мало того, что это очень эффективно, но это также единственный способ легко получить фактическое значение, потому что во время фазы привязки интерполяция еще не была оценена, и поэтому значение в это время устанавливается на undefined. - директивы doc

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

Как указано в комментарии @FMM, data разделяется на Angular, когда он нормализует имя атрибута, следовательно, использование key выше, а не dataKey.

Ответ 2

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

или вы можете использовать $interpolate так же, как $parse, но с {{}}

Ответ 3

angular удалить данные из всех атрибутов, поэтому, если ваш атрибут является "ключом данных", просто используйте "ключ", а не "dataKey"

Ответ 4

Я бы предложил использовать объектную нотацию, если вы находитесь внутри функции ссылки директивы, которая получает параметр attrs:

attrs.yourAttributeName