AngularJS: NG-spettacolo vs display: none

Question

ho avuto un caso d'uso per cui devo tenere un elemento HTML nascosto di default usando i CSS come segue:

HTML:

<div class="item"> 
</div> 

CSS:

.item { 
    display: none; 
} 

Ma, ho bisogno di attivare o disattivare la visibilità dell'elemento utilizzando ng-spettacolo dopo che la pagina è caricata come segue:

<div class="item" ng-show="show_element"> 
</div> 

Tuttavia, anche se $scope.show_element è impostato su true, l'elemento non diventa visibile, ovvero la proprietà css sta eseguendo l'override di AngularJS 'ng-show. C'è un modo per dare ad ng-show più priorità?

Inoltre, si potrebbe pensare che sia possibile mantenere $scope.show_element inizialmente come falso per nasconderlo. Ma in quel caso, ho una visione molto breve dell'elemento quando la pagina si sta caricando, cosa che non va bene dal punto di vista di UX.

Answer 1

Un modo per farlo funzionare nel tuo caso sarebbe utilizzando ng-class dove nel caso in cui elemento dovrebbe essere visibile è possibile applicare classe con la proprietà corretta visualizzazione cioè display: block e se si soffre di lento bootstrap è possibile utilizzare ng-cloak documentazione di controllo qui https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

Vorrei semplicemente cambiare classe. La funzione Ng-shows è semplicemente aggiungere o rimuovere la classe ng-hide, che solo "display: none! Important;". Non è importante cambiare il css delle classi.

Cosa si può semplicemente fare è qualcosa di simile:

<div class="{{element_class}} item"> 
</div> 

e impostare il element_class per la classe con display: block;

esempio di lavoro: http://codepen.io/GriessbreiLP/pen/EVXQjK

Spero che questo potrebbe aiutare.

Modifica: Nah, troppo lento, già menzionato due volte.

Answer 3

Un altro semplice alternativa

style="{{show_element?'display:block !important':'display:none !important'}}" 

Answer 4

Se si sta solo cercando di nascondere l'elemento in modo che non si ottiene un lampo sotto carico, quindi invece di usare la classe .item impostato display:none, puoi semplicemente impostare una classe di .ng-hide sull'elemento con ng-show su.

La direttiva AngularJS ng-show funziona aggiungendo o rimuovendo una classe di .ng-hide all'elemento DOM. La classe .ng-hide si applica la regola display: none !important;

<div class="ng-hide" ng-show="showElement">...</div>