CODEWITHSUNDEEP
javascripthtmlcssangularjs
Callum
Callum

Reputation: 1165

AngularJS ngCloak not working

I have a post category page that should show a message if there are no posts. It's showing the HTML when the page loads and then hiding it. ngCloak sounds like it should do the job but i'm not having any luck with it. Here's the HTML in my template file:

  <div ng-show="data.posts.length == 0" ng-cloak>
    <div class="no-posts">
      <h2>Coming Soon</h2>
      <p>Sorry there are posts here yet, check back soon.</p>
    </div>
  </div>

Here's the CSS i've added to my sass file. I also tried adding it directly into CSS on the page but it did not work:

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

What am I missing? This should be so simple right?

Edit: I also added this into the HTML head and it didn't work:

<style type="text/css">
  [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
  }
</style>

Upvotes: 1

Views: 1603

Answers (1)

Andrei Belokopytov
Andrei Belokopytov

Reputation: 1081

Ng-cloack directive works completely in another way than you expect it. It does not hide HTML, it does show it once template becomes compiled. The reason is that template compilation in the browser takes some time upon which ugly template without data will be shown to user. To hide uncompiled template you need to add ng-cloak class (to make it invisible) and ng-cloack directive to show after template compilation. The problem you describe here has another solution: you have to add 'ng-hide' class to your element, and it will be hidden until expression for ng-show wont take 'true' value.

window.setTimeout(function() {
  angular.module('demo', [])
   .controller('DemoController', ['$timeout', function($timeout) {
     var vm = this; 
  
     vm.isLoaded = true;
  }]);
angular.bootstrap(document, ['demo']);
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-controller="DemoController as vm">
<div>Message below will appear in 3 seconds</div>
<div class="ng-hide" ng-show="vm.isLoaded">Data is loaded</div>
</div>

Upvotes: 1

Related Questions