Two toggling elements with ngHide flash on screen momentarily

Question

I have a couple of containers that show text based on a scope property:

<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
    display: none !important;
}
</style>
<a ng-hide="show===false" ng-cloak>item 1</a>
<a ng-hide="show===true"  ng-cloak>item 2</a>
<span ng-click="toggle()">toggle</span> 
//js
var app = angular.module('appy', []);
app.controller('ctrl', function($scope){
  $scope.show = false;
  $scope.toggle = function(){
    $scope.show = !$scope.show;
  };
});

https://jsbin.com/numaxiroka/edit?html,js,output

This simple example works in the JSBIN, but on my page the content "item 1" and "item 2" both flash momentarily on the screen. What could I be doing incorrectly that would make both elements appear briefly?

I've been using this for reference.

As a start it would improve things to simply have: `ng-show="show"` for the first item, and `ng-hide="show"` for the second. — Dan, May 09 '16 at 16:22
Are the ngcloak styles loaded before your content on your actual page? — Patrick Evans, May 09 '16 at 16:23

Pankaj Parkar · Accepted Answer · 2016-05-11T19:27:40.900

2

1st thing I'd suggest you to do is, place ng-cloak there on body instead of each anchor. So that will help to hide angular uncompiled content ({{}}) to appear any where inside body.

If you are just trying to show anchor, then I'd say that do use ng-bind to render their inner text like below

Markup

<a ng-bind="show? 'item 1' : 'item 2'" href="{{myHref(show)}}"></a>

Code

$scope.myHref = function(){
   if(show) 
      return 'something/someaction1' 
   else 
      return 'something/someaction2' ;
}

edited May 11 '16 at 19:27

answered May 09 '16 at 16:22

Pankaj Parkar

134,766
23
234
299

I'm not sure I'm following. you've bound `show`, but then I don't see you using it anywhere. Then your `myHref` method always returns the same string..? – 1252748 May 09 '16 at 16:29
@thomas I did that just form demonstration.. First thing you should try placing `ng-cloak` over body element.. – Pankaj Parkar May 09 '16 at 16:31
Ultimately I did not end up using this, but it is nonetheless a clean solution. Thanks much! – 1252748 May 09 '16 at 17:04
1

@thomas may I know what you ended up using ? – Pankaj Parkar May 09 '16 at 17:05

Two toggling elements with ngHide flash on screen momentarily

1 Answers1