Question

我知道相同的angular属性指令可以通过多种方式绑定：

data-hello-world，x-hello-world和hello：world都是绑定helloWorld属性指令的有效属性。

在我的指令的link函数中，我如何知道使用了哪些属性键？

所以，如果我的html是：

<div data-hello-world="hi"></div><div hello:world="bye"></div>

我的指示是：</ p>

app.directive('helloWorld', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            console.log(attrs[???]);
        }
    }
});

如何知道在指令中查找哪个属性以便记录正确的值？

Answer 1

<div data-hello-world="hi" one="bye">
</div>


app.directive('helloWorld', function() {
return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
        console.log(attrs.one); // bye
   console.log(attrs.helloWorld); // hi
    }
}
});

在这里＆＃39; helloWord＆＃39;指令用作属性。以便分配给＆＃34; data-hello-world＆＃34;这是＆＃34; hi＆＃34;将在链接函数中定义的名为attrs的参数中找到。同时它将查找helloWorld指令提到的其他属性。在这里我已经提到了一个＆＃39;属性，这也可以在链接函数中定义的attrs参数中找到。你可以得到属性＆＃39;来自attrs参数的值。（是的，有很多方法来限制你在描述中提到的值）

任何进一步的问题，请提出你的问题和答案。

Answer 2

Angular指令使用camel cased命名约定从视图访问属性和作用域，而不使用特殊字符。请参阅documentation。

指令有诸如ngBind之类的骆驼名称。该指令可以通过将驼峰案例名称翻译成蛇案例来调用特殊字符：， - 或_。可选地，指令可以是以x-或数据为前缀，使其符合HTML验证器。

Plunker

var app = angular.module('MyApp', []);

app.directive('helloWorld', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            console.log(attrs['helloWorld']);
        }
    }
});

检索angularjs指令中的绑定值

2 个答案: