Ng-Show causing flicker

Question

I have tried the following, but am still getting a flicker when using ng-show: Angularjs - ng-cloak/ng-show elements blink

I am using a template to load my top nav as follows:

<div data-ng-controller="userInfoCtrl">
   <a href="#!home">Home</a>
<a href="#!add-item">Add Item</a>
<a href="#!settings" data-ng-show="display">Settings</a>

Here is my controller:

   // User Info
appControllers.controller('userInfoCtrl', ['$scope', 'appAdminCheck', function ($scope, appAdminCheck) {

    // Set value for using ng-show/ng-hide
    appAdminCheck().then(function (isAdmin) {
        if (isAdmin == true) {
            $scope.display = true;
        }
    });
}]);

Show us some more code. It is not sufficient. Where is ng-show ? — squiroid, Mar 25 '15 at 05:00
does `display` has set to false initially, or use ng-if will solve your issue.. — Pankaj Parkar, Mar 25 '15 at 05:13
@Kode you didn't provide enough information to solve your issue :-p — squiroid, Mar 25 '15 at 05:22
Yes I did include the CSS rule for ng-cloak not work. The issue is occurring cross browser. — Kode, Mar 25 '15 at 14:10

score 4 · Answer 1 · answered Mar 25 '15 at 05:13

4

try this,

use ng-class with style='visibility: hidden',

<a href="#!settings" style="visibility: hidden" ng-class='{forceShow: display}'>Settings</a>

style="visibility: hidden" hides the <a> initially then, when display comes to true class forceShow will add to the <a> by ng-class,

and force visibility: visible when $scope.display == true,

<style>
    .forceShow {
      visibility: visible !important;
    }
</style>

here is the Demo Plunker

answered Mar 25 '15 at 05:13

Kalhan.Toress

21,683
8
68
92

I know it will work, but why wee need hack? while we provided ng-show directive? can you please elaborate the reason. – Pankaj Parkar Mar 25 '15 at 05:14
1

I am agree with pankaj parkar :-p – squiroid Mar 25 '15 at 05:15
@k.Toress did you able to reproduce the above issue, see this plunkr http://plnkr.co/edit/1xbWnKEfokk5fr1I0qLk?p=preview , how could you fix this issue without reproducing it.. – Pankaj Parkar Mar 25 '15 at 05:18
1

lol :p, when compiling a directive its takes sometime to attach to the relevant controller, and bind the directives to the scope, if you put a css its will affect the element at first before the directives like `ng-show` or `ng-hide` or something else. – Kalhan.Toress Mar 25 '15 at 05:25
This still flickers everytime I go to another route, could it be because I have included the links as a template in each route? – Kode Mar 25 '15 at 14:20

score 0 · Accepted Answer · answered Mar 25 '15 at 14:27

I have found the issue. I had loaded the navigation as a template in each view, so when I changed routes, it was causing a flicker on the ng-show item. Moving the template into my index page resolved the issue, as it is loaded once. Example:

 <%--Container for HTML, inclusive of AngularJS App and responsive aspects--%>
<div class="container">

    <%--Include top menu--%>
    <div data-ng-include="'../Templates/topmenu.html'"></div>

    <%--Load Angular Views--%>
    <div data-ng-view></div>

    <%--Footer of page. Could be an include as well--%>
    <hr>
    <footer></footer>
</div>

Ng-Show causing flicker

2 Answers2