javascript 具有自定义属性的 angularjs 自定义指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26497231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angularjs custom directive with custom attributes
提问by narcispr
I'm new to angularjs and I don't know if this is possible and if possible how to implement it. I want to create a custom directive with a controller that uses information passed to it through attributes. This is a non working example of what I want to implement:
我是 angularjs 的新手，我不知道这是否可能以及如何实现它。我想创建一个带有控制器的自定义指令，该控制器使用通过属性传递给它的信息。这是我想要实现的一个非工作示例：
The HTML should look like:
HTML 应如下所示：
<div ng-app="test">
<custom-directive attr1="value1" attr2="value2"></custom-directive>
</div>
And the js:
和js：
var app = angular.module('test', [ ]);
app.directive("customDirective", function(){
return {
restrict: 'E',
scope: ???,
controller: function(){
console.log("print attributes value: " + attr1 + ", " + attr2 );
}
}
};
});
And the expect console output should be:
并且期望的控制台输出应该是：
print attributes value: value1, value2
打印属性值：value1、value2
Any idea? Thanks!
任何的想法？谢谢！
回答by PzYon
In your directive you can define the scope objects (attributes) you want to access and use as follows:
在您的指令中，您可以定义要访问和使用的范围对象（属性），如下所示：
app.directive("customDirective", function(){
return {
restrict: 'E',
scope: {attr1: "=", attr2: "="},
link: function(scope, elem, attr){
console.log("print attributes value: " + attr.attr1 + ", " + attr.attr2 );
}
};
There are different types of bindings you can use:
您可以使用不同类型的绑定：
- = is for two-way binding
- @ simply reads the value (one-way binding)
- & is used to bind functions
- = 用于双向绑定
- @ 只是读取值（单向绑定）
- & 用于绑定函数
See below link for more information: http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope
有关更多信息，请参阅以下链接：http: //weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope
回答by narcispr
Looking further I found this possible solution to my problem. It is very similar to the one proposed by Plunker with only slight changes in the syntax. This one works for me but I do not understand why the proposed by Plunker not.
进一步看，我找到了解决我的问题的可能方法。它与 Plunker 提出的非常相似，只是在语法上略有变化。这个对我有用，但我不明白为什么 Plunker 不建议这样做。
app.directive('customDirective', function(){
return {
compile: function() {
return {
pre: function(scope, element, attributes) {
console.log("Value: " + attributes.attr1 + attributes.attr2);
}
};
}
}
});
回答by Hyman
Directives can get quite complex. Knowing your end goal would allow a better answer, but this is the simplest way to do what you're asking:
指令会变得非常复杂。了解您的最终目标可以提供更好的答案，但这是执行您所要求的最简单方法：
var app = angular.module('test', []);
app.directive("customDirective", function(){
return {
link: function(scope, el, attr){
console.log("print attributes value: " + attr.attr1 + ", " + attr.attr2 );
}
}
});
