检查AngularJs指令中属性的存在答案

【问题标题】：Check existence of attribute in AngularJs Directive检查AngularJs指令中属性的存在
【发布时间】：2014-09-12 15:26:52
【问题描述】：

可以检查给定属性是否存在于指令中，理想情况下使用隔离范围，或者在最坏的情况下使用属性对象。

使用类似于 <project status></project> 的指令，我想有条件地呈现状态图标，但前提是状态属性存在。

return {
  restrict: 'AE',
  scope: {
    status: '@'
  },
  link: function(scope, element, attrs) {
    scope.status === 'undefined'
  }
}

理想情况下，它将直接绑定到范围，以便可以在模板中使用。但是，绑定变量的值是undefined。 & 只读和 = 双向绑定也是如此。

我知道通过添加<project status='true'></project> 可以轻松解决这个问题，但是对于我会经常使用的指令，我宁愿不必这样做。（XHTML 有效性，不是问题）。

【问题讨论】：

我知道你提到了它，但只是想知道 - 你有没有尝试过类似 "status" in attrs 的方法，看看这个评估是什么？
“@”不是传递给指令的单向文本绑定吗？所以 scope.status 应该是“true”的文本，只要你将一个变量作为 <project status="{{myScopeVariable}}"></project>传递给指令>
当您将作用域指定为上述对象时，该指令会创建一个新的隔离作用域，该作用域不会从父作用域继承属性。而是使用 scope: true 来创建一个新范围（可以访问父范围属性），或者使用 scope: false 来让指令使用父范围。你问的是这个吗？我不太明白你的问题...
链接函数中的代码也只是一个布尔表达式。您的意思是在 IF 语句中包含它吗？
scope.status === 'undefined'

【解决方案1】：

这样做的方法是检查链接函数的 attrs 参数中是否存在属性，并将其分配给指令隔离范围内的变量。

scope:{},
link: function(scope, element, attrs){
  scope.status = 'status' in attrs;
},

这应该可以工作，而不必在链接函数中使用 if 语句。

【讨论】：

【解决方案2】：

做你想做的事情的方法是查看链接函数中的属性对象：

link: 
  function(scope, element, attrs) {
    if("status" in attrs)
       //do something
  }

【讨论】：

【解决方案3】：

要在使用 Angular 1.5+ 组件时检查属性，您可以使用 $postLink 生命周期挂钩和 $element 服务，如下所示：

constructor(private $element) {}

$postLink() {
  if(!this.$element.attr('attr-name')){
    // do something
  }
}

【讨论】：

【解决方案4】：

由于attrs 值是javascript object 的类型。要检查属性是否存在，我们也可以使用hasOwnProperty() 方法代替in 关键字。

所以，它可能是：

link: function(scope, element, attrs) {
  var is_key_exist = attrs.hasOwnProperty('status');//Will return true if exist
}

您可以在此link 进一步阅读in 关键字和hasOwnProperty() 方法之间的区别

【讨论】：