Ng-if AngularJs, aparece de fundo o componente e logo em seguida some

Front-end
#1

Coloquei o componente na tela, e estou utilizando o ng-if, para esconder o componente quando carrega a pagina e esse componente vai aparecer quando clicar em outro componente.

Só que ao carregar a pagina, o componente aparece de fundo e logo em seguido ele some. Gostaria que ele não aparece de fundo, pois fica ruim ele aparecendo de fundo?

Segue abaixo meu código:

<html ng-app="mainModule">
<head>
<body ng-controller="mainController" bgcolor="#DCDCDC">
   <div ng-if="mostraTagCC">
       <div class="chip" ng-if="mostraTagCC">
          Tag
       <i class="material-icons">close</i>
   </div>
</div>

Meu Controller:

var app = angular.module('mainModule',
                              ['angularUtils.directives.dirPagination']);

app.controller('mainController', function($scope, $http) 
{
    $scope.mostraTagCC = false;
    $scope.mostraTagMaquina = false;
    $scope.mostraTagOperador = false;

Alguém pode me ajudar ?

#2

Coloque um classe CSS ou um CSS in-line para solução de quando for carregar a sua página

Como?

DEMO

<div ng-if="mostraTagCC">
       <div class="chip" ng-if="mostraTagCC" style="display:hidden;">
          Tag
       <i class="material-icons">close</i>
</div>

Exemplo Completo:

<html ng-app="app">
<head>
	<title></title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
	<style>
		.hide {
           display: none;
    	}
	</style>
</head>
<body>
<div>
  <div ng-controller="ctrl">
    <div ng-hide="!status" style="display:hidden;">
      Aparecendo o item !!!
    </div>  
  	<button ng-click="changeStatus()" type="submit" value="Mudar">Mudar</button>
  </div>
  <script>
      var app = angular.module('app', []);
      app.controller('ctrl', function($scope)
      {
		$scope.status = false;
		$scope.changeStatus = function()
		{			
			$scope.status = !$scope.status;			
		}
      });
  </script>
</div>
</body>
</html>

DEMO

1 curtida
#3

Bom dia evandro,

acredito que está havendo ocorrendo um tempo, que é normal até a sua variável ser executada pela controller e o html ter a div redenrizada novamente de acordo com as especificações do ng-if,

tente usar a tag ng-init para visualizar um resultado mais rápido na sua div.

<div ng-init="mostraTagCC=false" class="chip" ng-if="mostraTagCC">
-
-
-
</div>