angularjs: ng-show vs display: none

Question

miałem przypadek użycia przez co muszę zachować element HTML ukryty domyślnie przy użyciu CSS następująco:

HTML:

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

CSS:

.item { 
    display: none; 
} 

Ale muszę przełączać widoczność elementu używając ng-show po załadowaniu strony, co następuje:

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

Ale nawet jeśli $scope.show_element jest ustawione na wartość true, element nie staje się widoczny, to znaczy właściwość css zastępuje program AngularJS 'ng-show. Czy jest jakiś sposób na nadanie priorytetu ng-show?

Możesz także pomyśleć, że mogę zachować $scope.show_element jako fałszywe początkowo, aby to ukryć. Ale w takim przypadku dostaję bardzo krótki rzut elementu podczas ładowania strony, co nie jest dobre z punktu widzenia UX.

Answer 1

Jednym ze sposobów, aby to działało w Twoim przypadku będzie za pomocą ng-class gdzie w przypadku gdy element powinien być widoczny można zastosować klasę z prawidłowym właściwości wyświetlacza tj display: block i jeśli cierpią z powodu powolnego bootstrap można użyć tutaj ng-cloak dokumentację wyboru https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

Po prostu zmienię klasę. Funkcja Ng-show polega na dodaniu lub usunięciu klasy ng-hide, której jedynym atrybutem jest "display: none! Important;". Nie chodzi o zmianę css klas.

Co można zrobić, to po prostu coś takiego:

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

i ustawić element_class do klasy z display: block;

przykład robocza: http://codepen.io/GriessbreiLP/pen/EVXQjK

Nadzieja to może pomóc.

Edytuj: Nie, zbyt wolno, już wspomniano dwa razy.

Answer 3

Inną prostą alternatywą

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

Answer 4

Jeśli dopiero starają się ukryć element, tak aby nie dostać błysk pod obciążeniem, to zamiast przy użyciu klasy .item ustawiony display:none, można po prostu ustawić klasę .ng-hide na element z ng-show na.

Dyrektywa AngularJS ng-show polega na dodaniu lub usunięciu klasy .ng-hide do elementu DOM. Klasa .ng-hide stosuje zasadę display: none !important;

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