thomas thomas - 8 months ago 21
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:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
display: none !important;
<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>
var app = angular.module('appy', []);
app.controller('ctrl', function($scope){
$ = false;
$scope.toggle = function(){
$ = !$;

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.


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


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


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