javascript - How can I prevent Angular from rendering and displaying a page before ng-if evaluation? -

i wrote code below shows block of code based on "ng-if" evaluation(true/false). problem have wehn vm.anyitems equals true, angularjs tries render <p>...</p> block , display on browser before <div>...</div> displayed. there ways prevent this?

<div ng-if="vm.anyitems">     <div>...</div> </div> <div ng-if="!vm.anyitems">     <p>xxxxxxxxxxxxx</p> </div> 

try looking ngcloak. stop code being displayed until after application rendered angular.

your code can following:

<div ng-cloak ng-if="vm.anyitems">     <div>...</div> </div> <div ng-cloak ng-if="!vm.anyitems">     <p>xxxxxxxxxxxxx</p> </div> 

source: https://docs.angularjs.org/api/ng/directive/ngcloak