检查Angular Directive中是否存在属性

Question

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

使用类似于<project status></project>的指令，我想有条件地呈现状态图标，但仅当状态属性存在时才会显示。

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

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

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

Answer 1

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

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

这应该无需在链接函数中使用if语句即可。

Answer 2

通过查看链接函数中的属性对象来实现所需的方法：

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

Answer 3

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

constructor(private $element) {}

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

Answer 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()方法之间的区别