Here is a snippet of my HTML code:
<button type="button" class="btn btn-primary ng-cloak" ng-click="ctrl.add(ctrl.userProfile.username)" ng-hide="ctrl.userProfile.added">Add</button>
The code above is a part of the larger HTML document shown below:
<html ng-app="UserPageApp">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrapCSS/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/base.js"></script>
<script src="js/bootstrapJS/bootstrap.min.js"></script>
<base href="/">
</head>
Here is a snippet of my base.css file:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
The issue I am facing is that when the page loads, the "Add" button briefly appears and then disappears (even though ng-hide is True). This quick appearance and disappearance is what I refer to as the 'flicker'. Is there a way to prevent the button from showing up at all when ng-hide is True?
Upon making a slight change to the button's class and updating my CSS as shown below:
/* add ng-cloaks */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-cloaks {
display: none !important;
}
The button now remains hidden as intended. It seems like there may be a JavaScript function removing the ng-cloak class upon loading?
Further investigation revealed that when I removed ng-hide from the button, the ng-cloak class was not even being added to the button (verified by inspecting the element in Chromium). It appears that AngularJS is somehow removing the ng-cloak class automatically. Changing it to .ng-cloaks solves the issue.