thomas thomas - 6 months ago 13
HTML Question

Two toggling elements with ngHide flash on screen momentarily

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.

Answer

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' ;
}