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。 - directives 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用破折号（-）分析属性的方式。如果你想要范围而不是{{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');
  };
}]);

或者您可以像$parse一样使用$interpolate，但使用{{}}

Answer 3

angular strips'数据 - '关闭任何属性，所以如果你的属性是'data-key'，只需使用'key'，而不是'dataKey'

Answer 4

如果你在指令的link函数里面，我会建议使用对象表示法，它获取了attrs参数：

attrs.yourAttributeName

Answer 5

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

<input myTest="test" />

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

即

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

AngularJs指令 - 如何从指令中获取属性值

5 个答案: