When removing a class using ngClass, how can I be sure that the element starts with the class?
When removing a class using ngClass, how can I be sure that the element starts with the class?
A simple example of what I mean:
HTML:
<div ng-class="visibleClass"></div>
JS:
$scope.visibleClass = "invisible";
// Wait until the page loads
$scope.visibleClass = "";
CSS:
div.invisible {
display: none;
}
Here the div should start out as invisible and become visible as the page loads.
What actually happens is that it is visible for a frame or two, and then becomes visible as the js file loads. This is especially apparent should a transition be in place, and the elements transits from its visible state to its invisible state when it should have just started in its invisible state.
How can I avoid this behaviour?
i.e, when I remove a class using ngClass, how can I be sure that the element starts off with that class?
ng-show
ng-hide
2 Answers
2
It happens because it takes time for angular to bootstrap the app, the simplest solution would be to put a regular class attribute to the element with the value invisible.
class
invisible
HTML
<div ng-class="visibleClass" class="invisible"></div>
Use the ng-cloak directive.
ng-cloak
From the Docs:
The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
ngCloak
The directive can be applied to the <body> element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.
<body>
ngCloak
For more information, see AngularJS ng-cloak Directive API Reference
ng-cloak
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
why not to use
ng-showorng-hide?– Shashank Vivek
Jun 30 at 7:26