Ng-Cloak Doesn't Work?


Has anyone seen an issues with Ionic/ng-cloak? I’ve applied ng-clock but still get the flash on devices (not Chrome).

<content has-header="true" ng-cloak>

Page with named views loading partially at first?

While trying to figure this out, I realized that I also didn’t have animations between views like I used to. So, I added in animation="nav-title-slide-ios7".

Guess what, my ng-cloak problem is “solved”. I don’t think it’s actually solved though. I think the animation is so slow that the page renders before it is completed and I no longer see the flash.

So, I THINK ng-cloak is still not working.

NOTE : I’m not sure why my animation is so slow. I’ve never seen it like this before. Painfully slow. However, the Codepen demos from Ionic don’t seem slow; so, I’m sure the issue is mine.


Hi Calendee!

Interesting. What plaforms are they being slow on?

Could you open an issue about ng-cloak? It sounds like a bug…


I’m experiencing a similar issue. Here’s what I have in my index.html to render views:

<ion-nav-bar animation="nav-title-slide-ios7"

<ion-nav-view animation="slide-left-right"></ion-nav-view>

When I navigate to a new view, it shows the header, and any raw text/html I have in my template. For example, here’s my view:

    <ion-content has-header="true" padding="true">
        <p>{{item.resultDateTime | date:'EEE, MMM d, y'}}</p>
        <p>- department is blank -</p>
        <p>- phone is blank -</p>

In this example, the - x is blank - will show up, as does the Comments line.


Can you give us a screenshot of that? I’m not sure I understand. You don’t have an ng-show or an ng-cloak; so, I would expect the “- x is blank” to show up. Are you saying you don’t want them to show up?


I tried to wrap everything within <ion-content> with <div ng-cloak>, but it still doesn’t work. With normal angular, butting ng-cloak on a div with ng-view usually solves my problem. Is Ionic different in that I need to put it somewhere else? Attached is a screenshot:


I apologize but I’m still not understanding the problem. Your image shows a nav-bar, back button, some content, and a loading indicator. What is supposed to be different? Is some more content supposed to be showing or is something NOT supposed to be showing?


I’d prefer no content is shown in the background. You can see that there is some text and a “Comments” header in the background. I’m going to change the loading indicator to not fade the background and look more native (since I’m embedding this app inside a native app, which has a different loading indicator). After this change, the content in the background will be more obvious.


I figured out a solution.

<ion-view ng-show="">

I don’t know if this is the recommended solution, but it works good enough.


My animations aren’t working, but I think it is because I am not completely leveraging Angular-UI-Router in “the ionic way.” My ng-cloke also does not work in Chrome.


@ajbraus It’d be best if you open a new forum topic with a CodePen sample. Then we can help you work out why your animations aren’t working.


I have a similar issue - my detail screen has a couple of Cards on it and when I navigate to it it shows a lot of empty stuff behind the loader spinner until it is all loaded. ng-cloak did not seem to do anything so I used the hack above and it has a good end result:

Now the screen only appears when it is fully loaded and bound.

Great framework btw - got a lot further in a weekend than I did in 2 months with Kendo.


What is the proper implementation then to manage ng-cloak issue ?
It doesn’t work as well on my side…


I had the same problem and was using the ng-if approach but I found a faster hack-around.
I get the feeling (without having dug into the code) that the problem lies with watch cycles taking too long on less performant hardware. I sped it up by using $observe via {{}} rather than $watch as follows:

<div class="my-page {{loadedClass}}">
    <div class="content-whatever">

Then in the controller:

$scope.loadedClass = 'hidden';
getData().then(function() {$scope.loadedClass='';});


ng-cloak doesn’t work for me either. I added ng-cloak as a directive to various parts of the template, without any luck. Added the css to an external style sheet, as well as tried the angular-csp.css as directed in ng-cloak documentation.

My issue was all ng-show elements was “flickering”. When I changed it to ng-if, then it worked as desired…no flickering.


I had this same issue after upgrading to version 1.0.0 and it seems to be a bug in Ionic. There is a temporary fix in this thread: Beta 14 ng-hide/show that you can use until it gets fixed properly.