web-dev-qa-db-fra.com

Vérifier l'existence d'un attribut dans la directive Angular

Il est possible de vérifier si un attribut donné est présent dans une directive, idéalement en utilisant une portée isolée ou, dans le pire des cas, l'objet attributs.

Avec une directive qui ressemblait à quelque chose comme ça <project status></project>, Je souhaite rendre une icône d'état conditionnelle, mais uniquement si l'attribut d'état est présent.

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

Idéalement, il serait lié directement à la portée, de sorte qu'il pourrait être utilisé dans le modèle. Cependant, la valeur de la variable liée est non définie. C'est la même chose pour &lecture seule et =bidirectionnel liaisons.

Je sais que c'est résolu trivialement en ajoutant un <project status='true'></project>, mais pour les directives que j'utiliserai fréquemment, je préfère ne pas avoir à le faire. (La validité XHTML n'est pas un problème).

javascriptangularjsangularjs-directiveangularjs-scope
38
Dan Prince

Pour ce faire, vérifiez l'existence des attributs dans le paramètre attrs de la fonction de liaison et affectez-le aux variables dans la portée isolate de votre directive.

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

Cela devrait fonctionner sans avoir à utiliser une instruction if dans votre fonction de lien.

65
James Jackson

La façon de faire ce que vous voulez est de regarder l'objet attribut dans la fonction de lien:

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

Pour vérifier les attributs lors de l'utilisation de angular 1.5+ composants, vous pouvez utiliser le hook $ postLink lifecycle et le service $ element comme ceci:

constructor(private $element) {}

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

Puisque la valeur attrs est le type de javascript object. Pour vérifier l'existence d'un attribut, nous pouvons également utiliser la méthode hasOwnProperty() à la place du mot clé in.

Donc, ça pourrait être:

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

Vous pouvez lire la différence entre le mot clé in et la méthode hasOwnProperty() ici link

1
Bayu