AngularJs elements flicker

Question

I'm having difficulties making ng-cloak work. I've tried everything on this page: ng-cloak

I have a ui-view containing 2 divs. The divs are mutually exclusive. I want to show only one of them. I'm trying to control this by using the ng-show / ng-hide pair.

  <div ng-controller="app.overviewController" ng-cloak>        
       <div name="a" ng-show="isFirst">
                     ...content
       </div>

       <div name="b" ng-hide="isFirst">
                     ...content
       </div>
   </div>

"isFirst" is being set with a call to a WebApi method, in the controller attached to this view. I have a hard time figuring out if i'm missing something. Any tips would be appreciated.

There is no `ng-cloak` shown in your code and we have no idea how `isFirst` is set. We can't help you troubleshoot `ng-cloak` if you don't show all the relevant code and css used. A demo that replicates problem would also help — charlietfl, Feb 08 '16 at 14:58

score 0 · Answer 1 · answered Feb 08 '16 at 15:03

0

As stated here https://docs.angularjs.org/api/ng/directive/ngCloak You have to use ngCloak either as attribute or class

Here are the two approaches.

<div name="a" ng-cloak>...</div>
<div name="a" class="ng-cloak">...</div>

answered Feb 08 '16 at 15:03

lisa p.

2,138
21
36

score 0 · Answer 2 · answered Feb 08 '16 at 15:23

If you are trying it during the page load time then you can achieve it like this:

<div ng-show="false">
Page is loading...  
</div>

In your above code snippets, I guess may be the isFirst variable should be initialized at the time of declaration.

Also try this way.

<div name="a" ng-show="isFirst">
     ...content
</div>

<div name="b" ng-hide="!isFirst">
   ...content
</div>

AngularJs elements flicker

2 Answers2