Ich hatte einen Anwendungsfall, bei dem ich ein HTML-Element standardmäßig mit CSS wie folgt verborgen halten musste:
HTML:
%Vor%CSS:
%Vor%Aber ich muss die Sichtbarkeit des Elements mit ng-show ändern, nachdem die Seite wie folgt geladen wurde:
%Vor% Aber selbst wenn $scope.show_element auf "true" gesetzt ist, wird das Element nicht sichtbar, dh die css-Eigenschaft überschreibt AngularJS 'ng-show. Gibt es eine Möglichkeit, ng-show mehr Priorität einzuräumen?
Außerdem könntest du denken, dass ich $scope.show_element als falsch behalten kann, um es zu verstecken. Aber in diesem Fall bekomme ich einen sehr kurzen Einblick in das Element, wenn die Seite geladen wird, was aus Sicht von UX nicht gut ist.
Eine Möglichkeit, es in Ihrem Fall zum Laufen zu bringen, wäre die Verwendung von ng-class . Wenn Element sichtbar sein soll, können Sie die Klasse mit der korrekten Anzeigeeigenschaft display: block anwenden. Wenn Sie einen langsamen Bootstrap haben, können Sie% co_de verwenden % Überprüfen Sie die Dokumentation hier Ссылка
Wenn Sie nur versuchen, das Objekt auszublenden, damit Sie keinen Flash-Ladevorgang durchführen, können Sie statt der .item -Klasse auf display:none setzen, einfach eine Klasse von .ng-hide festlegen. zu dem Element mit ng-show on.
Die AngularJS-Direktive ng-show funktioniert durch Hinzufügen oder Entfernen einer Klasse von .ng-hide zum DOM-Element. Die Klasse .ng-hide wendet die Regel display: none !important;
Ich würde einfach die Klasse wechseln. Ng-Shows Funktion ist einfach die Klasse ng-hide hinzuzufügen oder zu entfernen, die nur eine Eigenschaft ist: "display: none! Important;". Es ist nicht wichtig, das CSS der Klassen zu ändern.
Was Sie einfach tun könnten, ist etwa so:
%Vor%Und setzen Sie die element_class mit display: block;
auf Ihre KlasseArbeitsbeispiel: Ссылка
Ich hoffe, das könnte Ihnen helfen.
Bearbeiten: Nee, zu langsam, schon zweimal erwähnt.
Tags und Links javascript angularjs css ng-show