Angular route changes briefly show content that should be hidden

Question

I have a view like so...

<section ng-controller="ProfileController">
    <div class="alert alert-danger" ng-show="!result.success">
        {{result.message}}
    </div>
    <div class="container" ng-show="result.success">
        <h1>{{result.profile.username}}</h1>
    </div>
</section>

When I access the full url directly, the first div never appears unnecessarily. However, if I click a link to another route and then back I see the alert box briefly before Angular applies the service result.

How can I avoid this?

score 2 · Accepted Answer · edited May 23 '17 at 12:11

You can avoid this behaviour by either using ng-bind instead of expression binding or by resolving all necessary data first.

<div ng-controller="Ctrl">
  Enter name: <input type="text" ng-model="name"><br>
  Hello <span ng-bind="name"></span>!
</div>

Quote from the docs:

It is preferrable to use ngBind instead of {{ expression }} when a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

Or

Resolve

Angular route changes briefly show content that should be hidden

1 Answers1