javascript - with - ng-class directive in angularjs




Angularjs-ng-manto/ng-show elementos piscam (20)

É melhor usar ng-if vez de ng-show . ng-if remove completamente e recria o elemento no DOM e ajuda a evitar que os ng-shows pisquem.

Eu tenho um problema em angular.js com diretiva / classe ng-cloak ou ng-show .

O Chrome funciona bem, mas o Firefox está causando o piscar de elementos com ng-cloak ou ng-show . IMHO é causado pela conversão ng-cloak / ng-show para style="display: none;" , provavelmente o compilador do Firefox javascript é um pouco mais lento, então os elementos aparecem por um tempo e depois se escondem?

Exemplo:

<ul ng-show="foo != null" ng-cloak>..</ul>

é melhor você consultar o documento angular, porque a versão [1.4.9] tem uma atualização abaixo que permite a diretiva data-ng-cloak.

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

Além de outras respostas, se você achar que o flash de código de modelo ainda está ocorrendo, é provável que você tenha seus scripts na parte inferior da página e isso significa que a diretiva ng-cloak não funcionará. Você pode mover seus scripts para a cabeça ou criar uma regra de CSS.

Os documentos dizem "Para o melhor resultado, o script angular.js deve ser carregado na seção head do documento html; alternativamente, a regra css acima deve ser incluída na folha de estilo externa do aplicativo."

Agora, não precisa ser uma folha de estilos externa, mas apenas um elemento na cabeça.

<style type="text/css">
  .ng-cloak {
    display: none !important;
  }
</style>

fonte: https://docs.angularjs.org/api/ng/directive/ngCloak


Certifique-se de que o AngularJS esteja incluído no head do HTML. Veja o documento ngCloak :

Para o melhor resultado, o script angular.js deve ser carregado na seção head do arquivo html; Como alternativa, a regra css (acima) deve ser incluída na folha de estilo externa do aplicativo.



Embora a documentação não o mencione, talvez não seja suficiente adicionar a display: none; regra para o seu CSS. Nos casos em que você está carregando o angular.js no corpo ou os modelos não são compilados em breve, use a diretiva ng-cloak e inclua o seguinte no seu CSS:

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

Como mencionado no comentário, o !important é importante. Por exemplo, se você tiver a seguinte marcação

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

e você está usando o bootstrap.css , o seletor a seguir é mais específico para o seu elemento ng-cloak 'ed

.nav > li > a {
  display: block;
}

Então, se você incluir uma regra com simplesmente display: none; A regra do Bootstrap terá precedência e o display será configurado para block , assim você verá o flicker antes do modelo ser compilado.


Estou usando o ng-show em uma diretiva para mostrar e ocultar pop-ups.

<div class="..." ng-show="showPopup">

Nenhum dos itens acima funcionou para mim, e usar ng-if em vez de ng-show seria um exagero. Isso implicaria remover e adicionar todo o conteúdo do popup ao DOM a cada clique. Em vez disso, adicionei um ng-if no mesmo elemento para garantir que ele não seja exibido no carregamento do documento:

<div class="..." ng-show="showPopup" ng-if="popupReady">

Depois disso, adicionei a inicialização ao controlador responsável por essa diretiva com um tempo limite:

$timeout(function () {
    $scope.popupReady = true;
});

Dessa forma, eliminei o problema da cintilação e evitei a operação dispendiosa da inserção do DOM a cada clique. Isso ocorreu em detrimento do uso de duas variáveis ​​de escopo para o mesmo propósito, em vez de uma, mas até o momento essa é definitivamente a melhor opção.


Eu envolveria o <ul> com um <div ng-cloak>


Eu nunca tive muita sorte com o ngCloak. Eu ainda fico tremendo apesar de tudo mencionado acima. A única maneira infalível de evitar o flicking é colocar seu conteúdo em um modelo e incluir o modelo. Em um SPA, o único HTML que será avaliado antes de ser compilado pelo Angular é sua principal página index.html.

Apenas pegue tudo dentro do corpo e coloque-o em um arquivo separado e então:

<ng-include src="'views/indexMain.html'"></ng-include>

Você nunca deve ter qualquer oscilação dessa maneira, pois o Angular irá compilar o modelo antes de adicioná-lo ao DOM.


Eu pessoalmente decidi usar o atributo ng-class em vez do ng-show . Eu tive muito mais sucesso nessa rota, especialmente para janelas pop-up que não são mostradas por padrão.

O que costumava ser <div class="options-modal" ng-show="showOptions"></div>

é agora: <div class="options-modal" ng-class="{'show': isPrintModalShown}">

com o CSS para a classe modal de opções sendo display: none por padrão. A classe show contém o display:block CSS.


Eu tentei a solução ng-cloak acima, mas ainda tem problemas intermitentes com o Firefox. A única solução que funcionou para mim é atrasar o carregamento do formulário até que o Angular esteja totalmente carregado.

Eu simplesmente adicionei o ng-init no aplicativo e uso o ng-if no lado do formulário para verificar se a variável que eu configurei já está carregada.

<div ng-app="myApp" ng-init="loaded='yes'"> 
   <form ng-if="loaded.length > 0">
      <!--all my elements here-->
   </form>
</div>

Eu tentei todas as respostas acima e nada funcionou. Usando ionic para desenvolver um aplicativo híbrido e estava tentando fazer uma mensagem de erro não piscar. Acabei resolvendo meu problema adicionando uma classe ng-hide ao meu elemento. Meu div já tem ng-show para mostrar o elemento quando há um erro. Adicionando ng-hide defina o div para não exibir antes que o angular seja carregado. Não ng-manto ou adicionando angular para a cabeça necessária.


Eu tive um problema onde um <div ng-show="expression"> seria inicialmente visível por uma fração de segundo, mesmo que "expression" fosse inicialmente falso, antes que a diretiva ng-show tivesse a chance de ser executada.

A solução que usei foi adicionar manualmente a classe "ng-hide", como em <div ng-show="expression" ng-hide> , para garantir que ela fosse inicialmente oculta. A diretiva ng-show adicionará / removerá a classe ng-hide conforme necessário depois disso.


Eu tive um problema semelhante e descobri que, se você tem uma classe que contém transições, o elemento piscará. Eu tentei adicionar ng-cloak sem sucesso, mas removendo a transição, o botão parou de piscar.

Eu estou usando o quadro iônico e o contorno de botão tem essa transição

.button-outline {
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}

Basta sobrescrever a classe para remover a transição e o botão parará de piscar.

Atualizar

Novamente no iônico há um flicker ao usar ng-show / ng-hide. Adicionando o seguinte CSS resolve:

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}

Fonte: http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9


Manter as declarações abaixo na tag head corrigiu essa questão

<style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}
</style>

documentação oficial


Nós nos deparamos com esse problema em nossa empresa e resolvemos o problema adicionando "display: none" ao estilo CSS para esses elementos ng-show piscantes. Nós não tivemos que usar manto de ng em tudo. Ao contrário de outros neste segmento, tivemos esse problema no Safari, mas não no Firefox ou no Chrome - possivelmente devido ao bug de repique lento do Safari no iOS7 .


Nenhuma das soluções listadas acima funcionou para mim. Decidi então olhar para a função real e percebi que quando “$ scope.watch” foi acionado, estava colocando um valor no campo de nome que não era para ser o caso. Então, no código que eu configurei e oldValue e newValue,

$scope.$watch('model.value', function(newValue, oldValue) {
if (newValue !== oldValue) {
validateValue(newValue);
}
});

Essencialmente, quando o scope.watch é disparado neste caso, o AngularJS monitora as alterações na variável de nome (model.value)


Por que vale a pena, eu tive um problema semelhante ng-manto não funciona. Talvez valha a pena verificar seu aplicativo / site com o cache ativado para reutilizar os arquivos de origem para ver se isso ajuda.

Com o meu encontro com cintilação, eu estava testando com o DevTools aberto e o cache desativado. Deixar o painel fechado com o cache ativado corrigiu meu problema.


Tentou ng-cloak mas ainda pisca brevemente. Abaixo, o código os livra completamente.

<body style="display:none;" ng-style="{'display':'block'}">

ngBind e ngBindTemplate são alternativas que não requerem CSS:

<div ng-show="foo != null" ng-cloak>{{name}}</div>  <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>




angularjs