Sprawdzanie istnienia atrybutu w dyrektywie kątowej

Question

Czy jest możliwe sprawdzenie, czy dany atrybut jest obecny w dyrektywie, najlepiej przy użyciu zakresu izolowania lub w najgorszym przypadku obiektu atrybutów.

Za pomocą dyrektywy, która wyglądała mniej więcej tak, <project status></project>, chcę warunkowo wyrenderować ikonę stanu, ale tylko jeśli obecny jest atrybut statusu.

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

Najlepiej byłoby, gdyby był on przymocowany bezpośrednio do lunety, aby mógł być użyty w szablonie. Jednak wartość zmiennej powiązanej to undefined. To samo dotyczy połączeń &tylko do odczytu i =wiązań dwukierunkowych.

Wiem, że jest to banalnie rozwiązane przez dodanie <project status='true'></project>, ale w przypadku dyrektyw, których będę często używać, wolałbym nie. (Ważność XHTML, nie jest problemem).

Answer 1

Sposób to zrobić jest sprawdzenie istnienia atrybutami w parametrze attrs w funkcję Link i przypisz to do zmiennych w zasięgu izolowania twojej dyrektywy.

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

Powinno to działać bez użycia instrukcji if w ramach funkcji łącza.

Answer 2

Sposobem na to, co chcesz, to patrząc na obiekt atrybutu w funkcji Link:

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

Answer 3

Ponieważ wartością attrs jest typ javascript object. Aby sprawdzić istnienie atrybutu, możemy również użyć metody hasOwnProperty() zamiast słowa kluczowego .

Tak, to może być:

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

można przeczytać dalej różnicy między in słów kluczowych i hasOwnProperty() sposobu na to link

Answer 4

celu sprawdzenia atrybutów przy użyciu kątowych elementów 1.5+ można użyć $ hak lifestylowy postLink i usługa $ element w ten sposób:

constructor(private $element) {} 

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