ng-show with $state.includes has blink/flickering - angular; ui-router

Question

As described here How to ng-hide and ng-show views using angular ui router, I have the following markup:

<div class='container'>
  <div ng-show='$state.includes('state1')></div>
  <div ng-show='$state.includes('state2')></div>
</div>

Using flex-box in css:

.container {
  display: flex;
  flex-direction: column;
}

Now it when I switch between the two states both divs are displayed for a blink of an eye resulting in an ugly blink effect.

I tried ng-cloak from Angularjs - ng-cloak/ng-show elements blink, but without any success.

I can't use ng-if since I use 'Sticky State' from ui-router-extras, which requires the DOM to persist.

Have you tried animating `ng-show` with `ng-animate`? ex. `.ng-hide-add { animation:0.5s showdiv ease; } .ng-hide-remove { animation:0.5s hideDiv ease; }` — Stubbies, Nov 27 '16 at 17:11
Use an alternate css class to hide by default. `
`. Where default-hide should have a `display: none` avoid `!important`. — Miguel Lattuada, Nov 27 '16 at 17:40
The hide-add is delayed, but the hide-remove is not. When I set the time to 2seconds or so, as a result the blink turns into a long blink. It shows a nice solution, but by delaying hide-remove and not hide-add. Only I can't get this to work.. — Stefan, Nov 27 '16 at 17:41
@MiguelLattuada with default-hide it doesn't show up at all. I think about trying it with adding a class with ng-class on $state.includes(). It just seems like rebuilding ng-show.. — Stefan, Nov 27 '16 at 17:45

score 0 · Answer 1 · answered Nov 27 '16 at 17:29

0

$state won't be available to use in HTML so

1) you can do something like this in Ctrl

$scope.state = $state;

but i won't recommend this

2) In HTML

<div class='container'>
  <div ng-show="showThis('state1')"></div>
  <div ng-show="showThis('state2')"></div>
</div>

In Controller

$scope.showThis = function(type){
  return $state.includes(type);
}

answered Nov 27 '16 at 17:29

nmanikiran

2,866
15
19

Thank you for the fast response. I use your first option. In option 2 the problem remains. – Stefan Nov 27 '16 at 17:36

score 0 · Answer 2 · answered Nov 27 '16 at 17:50

Even though you already mentioned that you have tried ng-cloak, I think that the right answer to your issue is indeed ng-cloak with the:

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

style configuration. I have made an example on CodePen.io that show exaclty this solution working with Angular UI Router. As you can see in the example, the whole view blinks as you mentioned but, if you add the 'ng-cloak' directive to the:

<div ng-app="myApp">

which will then become:

<div ng-app="myApp" ng-cloak>

you will see that Angular protects the view from being showed (blinking). And that is exactly the purpose of the of the 'ng-cloak' directive.

Hope this example help you solving you issue.

Thanks for the CodePen. Sadly it doesn't work. I also dont see any flicker when I remove ng-cloak in the Pen.. — Stefan, Nov 27 '16 at 18:06

score 0 · Answer 3 · answered Sep 13 '17 at 14:43

You can use ng-style to remove the flicker effect.

<div class='container'>
    <div ng-style="{'display': $state.includes('state1') ? 'block' : 'none'}"></div>
    <div ng-style="{'display': $state.includes('state2') ? 'block' : 'none'}"></div>
</div>

I'm not sure why ng-show triggers a flicker effect with sticky states, but this workaround fixes the issue.

ng-show with $state.includes has blink/flickering - angular; ui-router

3 Answers3