CODEWITHSUNDEEP
angularjsasp.net-mvc
HorseKing
HorseKing

Reputation: 454

Raw template (uncompiled) flicker when page loaded/refreshed

I am using .NET MVC Razor as my view engine and attached an Angular controller to that view. This view is functional. However, it contains a strange behavior when the page got loaded or refreshed.

For example, if I put something like {{vm.FirstName}} into the view. When the page got loaded, I can see the pure text of "{{vm.FirstName}}" for a very short time. The text will soon be disappeared and then I will see the actual value of that property.

How can I fix this problem?

Upvotes: 0

Views: 85

Answers (1)

Omri Luzon
Omri Luzon

Reputation: 4214

If you place your curly braces {{}} in the main index.html, it will show up before angular has time to start up and parse the scope variables into the DOM.

You can use the ng-bind directive to overcome this so the text will only show after angular parses the variables.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="foo='hello world!'">
  <h1 ng-bind="foo"></h1>
</div>

Upvotes: 1

Related Questions