Angular Directive属性包含其他属性

Question

我已经创建了一个自定义指令，它使用元素的属性来构建字符串。当我枚举链接函数的attrs参数时，我发现它还包含角度属性$$element和$attr。这些的目的是什么？目前我不得不像这样过滤掉这些：

var app = angular.module('demo', []);
app.directive('imgTransform', function () {
    return {
        restrict: 'E',
        template: '<img src="{{uri}}" alt="{{title}}" />',
        scope: {},
        link: function (scope, element, attrs) {


            angular.forEach(attrs, function (value, key) {
                if (key.charAt(0) !== '$') {
                }
            });

        }
    };
});

Answer 1

来自Attributes docs：

  

指令编译/链接函数之间的共享对象，它包含规范化的DOM元素属性

这个对象不仅仅是一个键值hashmap，它还有通过它的原型继承自 Attributes类的方法。它具有 $ attrs 和 $$元素属性的原因是为这些方法提供正确的上下文（元素/属性）：

this.$$elements
this.$attr

BTW，angular.js中带有$$前缀的每个属性都是未记录的私有属性，不应在外部使用。 javascript不支持真正的私有方法/属性，因此angular使用此约定。

参见此示例：

在文档中进一步了解：

  

$ ATTR

     

object：DOM元素属性名称到规范化名称的映射。这需要从规范化名称反向查找到实际名称。

幸运的是，你可以这样使用attrs.$attr：

 angular.forEach(attrs.$attr, function (value, key) {
    attrs[key] // <---