AngularJs的原始模板在被替换之前会在IOS上短暂显示

Question

I've a mobile site based on angularJs, on a normal machine it looks fine. When I take it to IOS. I notice that the raw template is shown briefly before the text is replaced by angularJs.

ie i have {{TitleText}} show up briefly, before I see it being replaced. It seems to be more apparent on iphone than ipad, I guess from the performance of the machine. It's also more apparent on logic heavy pages..

My question is that is there a way to prevent the raw template from displaying on slower browsers? maybe a built in loading screen to hide the details until the page loads?

Answer 1

使用ng-bind的另一种选择是ng-cloak

Answer 2

Try using ng-bind

<h1 ng-bind="TitleText"></h1>

In slower browsers the element will appear empty until angular has finished loading

Edit: Instead of an empty element, placeholder text can be used.

<h1 ng-bind="TitleText">Loading Title...</h1>

"Loading Title..." will be replaced with the value of TitleText after angular has finished loading.