Impossibile modificare lo stile CSS in AngularJS

Question

Per alcune ragioni, non riesco a cambiare lo stile di un elemento usando la seguente:

angular.element("#element").style.height = 100px; 

Sono sicuro che angular.element("#element") opere, in quanto restituisce un elemento DOM . Inoltre, questo funziona:

angular.element("#element").addClass('something'); 

(Tutto quello che ho trovato è di circa ngStyle ma non credo che è quello che sto cercando?)

Dovrei usare qualcosa di diverso?

In caso affermativo: Cosa? Perché il .style.something non funziona?

Answer 1

Secondo the docs:

Nota: tutti i riferimenti degli elementi in angolare sono sempre avvolti con jQuery o jqLite; non sono mai riferimenti DOM grezzi.

Così la proprietà .style non è disponibile direttamente, dal momento che è una proprietà della avvolto HTMLElement.

---

È possibile utilizzare l'approccio di ivarni per entrare in possesso del HTMLElement (angular.element(...)[0].style...) o utilizzare .css() il metodo di jQuery/di jqLite:

angular.element('#element').css('height', '100px'); 

Answer 2

Angular's element restituisce qualcosa che racchiude un elemento DOM, non l'elemento DOM stesso. Puoi accedere all'elemento sottostante molto come faresti con un selettore JQuery.

angular.element("#element")[0].style.height = 100px; 

Questo ovviamente presuppone che tu abbia una corrispondenza, che dovresti quando utilizzi un ID.

Answer 3

Se si esegue angolare senza jQuery, questo funziona:

angular.element(document.querySelector("#element"))[0].style.height = "100px"; 

L'ho provato in un'applicazione ionica.