Vérifier l'existence de l'attribut dans Angulaire de la Directive

Est possible de vérifier si un attribut est présent dans une directive, idéalement à l'aide d'isoler la portée ou dans le pire des cas les attributs de l'objet.

Avec une directive qui ressemblait à quelque chose comme ceci <project status></project>, je veux conditionnellement rendre une icône de statut, mais seulement si l'attribut est présent.

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

Idéalement, il devrait être lié directement à la portée, de sorte qu'il pourrait être utilisé dans le modèle. Toutefois, la limite de la variable valeur est undefined. Il en va de même pour & en lecture seule et = les deux sens liaisons.

Je sais que c'est trivialement résolu par l'ajout d'un <project status='true'></project>, mais pour les directives que je vais l'utiliser souvent, je préfère ne pas avoir à le faire. (XHTML validité, n'est pas un problème).

  • Je sais que vous avez mentionné, mais je me demandais, avez - vous essayer quelque chose comme "status" in attrs et de voir ce que l'évaluation?
  • n'est-ce pas "@" un texte contraignant passé à la directive? afin de portée.l'état de la lecture de texte "vrai", aussi longtemps que vous passer une variable dans la directive en tant que <code><projet de statut="{{myScopeVariable}}"></projet></code>
  • Lorsque vous préciser le champ d'application comme un objet, comme ci-dessus, la directive crée un nouveau isoler Champ d'application ce qui ne veut pas hériter des propriétés de parent. Au lieu de cela portée d'utilisation: true pour créer un nouveau champ d'application (avec l'accès à un parent propriétés de portée), ou de la portée: false avoir directive utiliser parent. Est-ce que vous demandez? Je n'ai pas très bien votre question...
  • Aussi le code de votre lien de fonction est une expression booléenne. Avez-vous l'intention de l'inclure dans une instruction if?
  • scope.status === 'undefined' <== ne rien faire par lui-même. Qu'attendez-vous?
InformationsquelleAutor Dan Prince | 2014-09-12
  1. 65

    La façon de le faire est de vérifier l'existence des attributs à l'intérieur de la fonction de lien est attrs paramètre, et en l'attribuant à des variables au sein de votre directive de l'isoler de la portée.

    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.

    InformationsquelleAutor James Jackson
  2. 18

    La façon de faire ce que vous voulez, c'est en regardant l'attribut de l'objet dans la fonction link:

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

    Pour Vérifier les attributs lors de l'utilisation angulaire 1.5+ composants, vous pouvez utiliser le $postLink du cycle de vie de crochet et de l' $élément de ce type de service:

    constructor(private $element) {}

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

    Depuis le attrs valeur est le type de javascript object. Pour vérifier l'attribut de l'existence, nous pouvons également utiliser hasOwnProperty() plutôt la méthode in mot-clé.

    Oui, cela pourrait être :

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

    Vous pouvez lire plus loin la différence entre in mot-clé et hasOwnProperty() méthode à ce lien

    InformationsquelleAutor Bayu