AngularJS ng-cloak does not prevent code blinking in Mean.js

Question

This concerns a MEAN.js environment. I have if-statements in my Angular view to check if I have any results from my database. If there are results then I show them, if not then I show an error message.

I have an issue with Angular code blinking: when the page loads, for a split-second I see the error message, and then it immediately shows the results from my database. The ng-cloak directive does not work.

Code

Below I have included very basic Angular code that should make clear what I am doing.

Controller:

// Return a specific person from the database.
this.person = Persons.get({
    personId: $stateParams.personId
});

View:

<div ng-if="personCtrl.person.length">
    <!-- Show person's details here... -->
</div>

<div ng-if="!personCtrl.person.length" ng-cloak>
    <p>Sorry, person could not be found.</p>
</div>

I tried adding the ng-cloak directive, which does not work. MEAN.js also uses Bootstrap and provides a few CSS classes, but no matter which ones I add, none of them work:

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

In short: I can add the ng-cloak directive AND the ng-cloak CSS class, but they do not work. I can add style="display:none;" but that hides the error message even if it is supposed to be shown.

Answer 1

Is this maybe what you are looking for?

<div ng-show="personCtrl.person.length">
    <!-- Show person's details here... -->
</div>

<div ng-hide="personCtrl.person.length" ng-cloak>
    <p>Sorry, person could not be found.</p>
</div>