Verifica esistenza attributo nella direttiva angolare

Question

È possibile verificare se un dato attributo è presente in una direttiva, idealmente utilizzando l'ambito isolato o, nel peggiore dei casi, l'oggetto attributi.

Con una direttiva simile a questa <project status></project>, voglio rendere condizionatamente un'icona di stato, ma solo se l'attributo status è presente.

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

Idealmente, sarebbe legato direttamente allo scopo, in modo che potesse essere utilizzato nel modello. Tuttavia, il valore della variabile associata è non definito. Lo stesso vale per &a lettura singola e =attacchi a due vie.

So che è banalmente risolto aggiungendo un <project status='true'></project>, ma per le direttive che userò frequentemente, preferirei non doverlo fare. (Validità XHTML, non è un problema).

Answer 1

Il modo per farlo è quello di verificare l'esistenza degli attributi all'interno parametro attrs della funzione di collegamento e assegnarlo a variabili all'interno dell'ambito isolato della direttiva.

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

Questo dovrebbe funzionare senza dover utilizzare un'istruzione if nella funzione di collegamento.

Answer 2

Il modo per fare quello che vuoi è di guardare l'oggetto attributo nella funzione di collegamento:

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

Answer 3

Poiché il valore attrs è il tipo di javascript object. Per verificare l'esistenza degli attributi possiamo anche usare il metodo hasOwnProperty() invece la parola chiave in.

Quindi, potrebbe essere:

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

Si può leggere ulteriormente la differenza tra la parola chiave e inhasOwnProperty() metodo in questa link

Answer 4

per controllare per gli attributi quando si utilizza componenti 1.5+ angolari è possibile utilizzare la $ postLink lifecycle hook e il servizio $ element in questo modo:

constructor(private $element) {} 

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