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}}，您可以做两件事：

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

角度剥离任何属性的“数据-”，所以如果您的属性是“数据键”，只需使用“键”，而不是“数据键”

于 2015-05-18T18:36:47.730 回答
1

如果您在获取 attrs 参数的指令的链接函数内，我建议使用对象表示法：

attrs.yourAttributeName

于 2014-11-25T15:56:31.990 回答
0

我发现的另一个问题是$attr会将属性名称转换为小写。

<input myTest="test" />

可以通过这个获得价值...attr["mytest"]

IE

...link: function (scope, element, attr) { console.log(attr["mytest"]); ...}

于 2021-05-04T19:52:56.757 回答