Search code examples
javascriptcssangularjsng-hidengcloak

AngularJS - ng-cloak on button not working (flicker still exists) in Chromium - ng-cloak doesn't even get added to the CSS for some reason

This is my HTML (amongst other things):

<button type="button" class="btn btn-primary ng-cloak" ng-click="ctrl.add(ctrl.userProfile.username)" ng-hide="ctrl.userProfile.added">Add</button>

The HTML above is extending this HTML page:

<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>

This is my base.css (amongst a few other things):

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

The problem is, when the page loads, the "Add" button appears and then disappears after a second (even when ng-hide evaluates to True. Note: This is what I mean by the 'flicker'). Is there a way for me to not allow the button to show up at all if ng-hide evaluates to True?

Edit: When I change class="btn btn-primary ng-cloak" to class="btn btn-primary ng-cloaks" and make this my CSS:

/* add ng-cloaks */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-cloaks {
  display: none !important;
}

then it successfully does not display the button. It seems as if some JS is removing ng-cloak on load?

Edit 2: I removed ng-hide from my button and turns out that the ng-cloak class doesn't even get added to the button (I used "inspect element" in Chromium and saw that the ng-cloak CSS is not even being applied and the class ng-cloak does not appear on the buttons lass). So it seems as if AngularJS is removing the ng-cloak class for some reason (and like I mentioned earlier, when I change it to .ng-cloaks, it works perfectly fine).

Solution

  • Found the error. Although I didn't mention it in my post, ctrl.userProfile.added didn't exist initially (in my user.js file, all I had was self.userProfile = [] initially). I then did a get request and loaded self.userProfile which then became self.userProfile = {'added': true}. So I guess AngularJS was displaying the button because self.userProfile.watching was originally undefined.