Javascript 检查 Angular 指令中的属性是否存在
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25811734/
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
Check existence of attribute in Angular Directive
提问by Dan Prince
Is is possible to check whether a given attribute is present in a directive, ideally using isolate scope or in a worst case scenario the attributes object.
是否可以检查给定的属性是否存在于指令中，理想情况下使用隔离范围或在最坏的情况下使用属性对象。
With a directive that looked something like this <project status></project>, I want to conditionally render a status icon, but only if the status attribute is present.
使用看起来像这样的指令<project status></project>，我想有条件地呈现一个状态图标，但前提是 status 属性存在。
return {
restrict: 'AE',
scope: {
status: '@'
},
link: function(scope, element, attrs) {
scope.status === 'undefined'
}
}
Ideally, it would be bound straight to the scope, so that it could be used in the template. However, the bound variable's value is undefined. The same goes for &read-onlyand =two-waybindings.
理想情况下，它将直接绑定到作用域，以便它可以在模板中使用。但是，绑定变量的值是undefined。这同样适用于&只读和=双向绑定。
I know that it's trivially solved by adding a <project status='true'></project>, but for directives that I will use frequently, I'd rather not have to. (XHTML validity, is not an issue).
我知道通过添加 a 可以轻松解决它<project status='true'></project>，但是对于我将经常使用的指令，我宁愿不必。（XHTML 有效性，不是问题）。
回答by James Hymanson
The way to do this is to check for the existence of the attributes within the link function's attrs parameter, and assign this to variables within your directive's isolate scope.
这样做的方法是检查链接函数的 attrs 参数中的属性是否存在，并将其分配给指令的隔离范围内的变量。
scope:{},
link: function(scope, element, attrs){
scope.status = 'status' in attrs;
},
This should work without having to use an if statement within your link function.
这应该可以工作，而不必在链接函数中使用 if 语句。
回答by Joao Leal
The way to do what you want is by looking at the attribute object in the link function:
做你想做的事情的方法是查看链接函数中的属性对象：
link:
function(scope, element, attrs) {
if("status" in attrs)
//do something
}
回答by Justin Boyson
To Check for attributes when using angular 1.5+ components you can use the $postLink lifecycle hook and the $element service like this:
要在使用 angular 1.5+ 组件时检查属性，您可以使用 $postLink 生命周期钩子和 $element 服务，如下所示：
constructor(private $element) {}
$postLink() {
if(!this.$element.attr('attr-name')){
// do something
}
}
回答by Bayu
Since the attrsvalue is type of javascript object. To check attribute existence we can also using hasOwnProperty()method instead inkeyword.
由于该attrs值是 javascript 类型object。要检查属性是否存在，我们也可以使用hasOwnProperty()method 代替in关键字。
So, it could be :
所以，它可能是：
link: function(scope, element, attrs) {
var is_key_exist = attrs.hasOwnProperty('status');//Will return true if exist
}
You can read further the difference between inkeyword and hasOwnProperty()method at this link
您可以在此链接中进一步阅读in关键字和hasOwnProperty()方法之间的区别
