Ng-Cloak Doesn't Work?

ionic-v1
1

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>

2

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.

3

Hi Calendee!

Interesting. What plaforms are they being slow on?

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

4

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"
             type="bar-positive"
             back-button-type="button-icon"
             back-button-icon="ion-arrow-left-c"></ion-nav-bar>

<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-view>
    <ion-content has-header="true" padding="true">
        <h2>{{item.name}}</h2>
        <p>{{item.resultDateTime | date:'EEE, MMM d, y'}}</p>
        <p>{{item.orderedBy}}</p>
        <p>- department is blank -</p>
        <p>- phone is blank -</p>
        <h3>Comments</h3>
        <p>{{item.comments}}</p>
    </ion-content>
</ion-view>

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

5

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?

6

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:

7

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?

8

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.

9

I figured out a solution.

<ion-view ng-show="item.name">

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

10

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.

11

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

12

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.

13

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

1 Like
14

Hi,
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">
        Stuff
    </div>
</div>

Then in the controller:

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

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.

16

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.