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

用途$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.

Answer 2

尝试attrs["dataKey"]- 这是html用dash(-)解析属性的方式.如果你想要范围的值而不是{{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使用{{}}