Проверить наличие атрибута в директиве Angular

Можно проверить, присутствует ли данный атрибут в директиве, в идеале с использованием области выделения или в худшем случае объект атрибутов.

С директивой, которая выглядит примерно так: <project status></project>, я хочу условно отобразить значок состояния, но только если присутствует атрибут состояния.

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

В идеале, он будет привязан к области видимости, чтобы ее можно было использовать в шаблоне. Однако значение связанной переменной undefined. То же самое относится к & только для чтения и = двусторонним привязкам.

Я знаю, что это тривиально разрешено, добавив <project status='true'></project>, но для директив, которые я буду использовать часто, я бы предпочел не делать этого. (Действительность XHTML, это не проблема).

Ответ 1

Способ сделать это - проверить наличие атрибутов в параметре attrs функции link и назначить это переменным в пределах области выделения директивы.

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
}

Вы можете дополнительно прочитать разницу между in ключевым словом и hasOwnProperty() методом на этой ссылке