Eu entendo isso ng-show
e ng-hide
afeta a classe definida em um elemento e que ng-if
controla se um elemento é renderizado como parte do DOM.
Existem diretrizes para escolher ng-if
entre ng-show
/ ng-hide
ou vice-versa?
Eu entendo isso ng-show
e ng-hide
afeta a classe definida em um elemento e que ng-if
controla se um elemento é renderizado como parte do DOM.
Existem diretrizes para escolher ng-if
entre ng-show
/ ng-hide
ou vice-versa?
Respostas:
Depende do seu caso de uso, mas para resumir a diferença:
ng-if
removerá elementos do DOM. Isso significa que todos os seus manipuladores ou qualquer outra coisa anexada a esses elementos serão perdidos. Por exemplo, se você vincular um manipulador de cliques a um dos elementos filhos, quando for ng-if
avaliado como falso, esse elemento será removido do DOM e o manipulador de cliques não funcionará mais, mesmo depois que ng-if
avaliar como true e exibir o elemento. Você precisará reconectar o manipulador.ng-show/ng-hide
não remove os elementos do DOM. Ele usa estilos CSS para ocultar / mostrar elementos (nota: você pode precisar adicionar suas próprias classes). Dessa forma, seus manipuladores anexados a crianças não serão perdidos.ng-if
cria um escopo filho enquanto ng-show/ng-hide
nãoOs elementos que não estão no DOM têm menos impacto no desempenho e seu aplicativo Web pode parecer mais rápido quando usado em ng-if
comparação com ng-show/ng-hide
. Na minha experiência, a diferença é insignificante. As animações são possíveis ao usar ambos ng-show/ng-hide
e ng-if
, com exemplos para ambos na documentação Angular.
Por fim, a pergunta que você precisa responder é se você pode remover o elemento do DOM ou não?
ng-if
. Verifique o parágrafo Animações e o exemplo nos documentos . Também com ng-hide/ng-show
os seletores de CSS como :first-child
ou :nth-child
não funcionarão corretamente, pois os elementos ocultos também serão contados.
ng-if
cria um novo escopo enquanto ng-show
não.
Veja aqui um CodePen que demonstra a diferença de como o ng-if / ng-show funciona, em termos de DOM.
@markovuksanovic respondeu bem à pergunta. Mas eu chegaria a isso de outra perspectiva: eu sempre usava ng-if
e tirava esses elementos do DOM, a menos que:
$watch
-es em seus elementos para permanecer ativo enquanto eles estão invisíveis. Os formulários podem ser um bom argumento para isso, se você quiser verificar a validade das entradas que não estão visíveis no momento, para determinar se o formulário inteiro é válido.Angular está escrito muito bem. É rápido, considerando o que faz. Mas o que ele faz é um monte de mágica que faz coisas difíceis (como ligação de dados bidirecional) parecerem trivialmente fáceis. Fazer com que todas essas coisas pareçam fáceis implica alguma sobrecarga de desempenho. Você pode ficar chocado ao perceber quantas centenas ou milhares de vezes uma função setter é avaliada durante o $digest
ciclo em um pedaço de DOM que ninguém está olhando. E então você percebe que tem dezenas ou centenas de elementos invisíveis, todos fazendo a mesma coisa ...
Os desktops podem realmente ser poderosos o suficiente para tornar a maioria dos problemas de velocidade de execução de JS discutíveis. Mas se você estiver desenvolvendo para dispositivos móveis, usar ng-if sempre que humanamente possível deve ser um acéfalo. A velocidade do JS ainda é importante nos processadores móveis. Usar ng-if é uma maneira muito fácil de obter otimização potencialmente significativa a um custo muito, muito baixo.
ng-show
pode ser útil quando você tiver, digamos, guias cada uma com muito conteúdo que leva tempo para renderizar. Após a primeira renderização, a movimentação entre as guias será instantânea, ao passo ng-if
que exigiria nova renderização, eventos de ligação etc. A desvantagem, como você diz, é que cria relógios sendo executados em segundo plano. Angular precisa desesperadamenteng-ifshowwatch
Da minha experiência:
1) Se sua página tiver uma alternância que usa ng-if / ng-show para mostrar / ocultar algo, ng-if causa mais atraso no navegador (mais lento). Por exemplo: se você tem um botão usado para alternar entre duas visualizações, o ng-show parece ser mais rápido.
2) ng-if criará / destruirá o escopo quando for avaliado como verdadeiro / falso. Se você tiver um controlador conectado ao ng-if, esse código será executado toda vez que o ng-if for avaliado como verdadeiro. Se você estiver usando o ng-show, o código do controlador será executado apenas uma vez. Portanto, se você tiver um botão que alterna entre várias visualizações, o uso de ng-if e ng-show faria uma enorme diferença na maneira como você escreve o código do seu controlador.
A resposta não é simples:
Depende das máquinas de destino (móvel x desktop), depende da natureza dos seus dados, navegador, sistema operacional, hardware em que é executado ... você precisará avaliar se realmente deseja saber.
É principalmente um problema de memória versus computação ... como na maioria dos problemas de desempenho, a diferença pode se tornar significativa com elementos repetidos (n) como listas, especialmente quando aninhados (nxn ou pior) e também que tipo de computação você executa dentro desses elementos :
ng-show : se esses elementos opcionais estiverem frequentemente presentes (densos), como por exemplo 90% das vezes, pode ser mais rápido tê-los prontos e apenas mostrá-los / ocultá-los, especialmente se o conteúdo for barato (apenas texto simples, nada para calcular ou carregar). Isso consome memória, pois preenche o DOM com elementos ocultos, mas apenas mostrar / ocultar algo que já existe provavelmente será uma operação barata para o navegador.
ng-if : Se, pelo contrário, é provável que os elementos não sejam mostrados (esparsos), apenas construa-os e destrua-os em tempo real, especialmente se seu conteúdo for caro (computações / classificadas / filtradas, imagens, imagens geradas). Isso é ideal para elementos raros ou "sob demanda", economiza memória em termos de não preencher o DOM, mas pode custar muita computação (criação / destruição de elementos) e largura de banda (obtenção de conteúdo remoto). Também depende de quanto você calcula na visualização (filtragem / classificação) versus o que você já possui no modelo (dados pré-classificados / pré-filtrados).
Uma observação importante:
ngIf (diferentemente do ngShow) geralmente cria escopos filhos que podem produzir resultados inesperados.
Eu tive um problema relacionado a isso e passei MUITO tempo para descobrir o que estava acontecendo.
(Minha diretiva estava gravando seus valores de modelo no escopo errado.)
Portanto, para economizar seu cabelo, use o ngShow, a menos que você corra muito devagar.
De qualquer forma, a diferença de desempenho é quase imperceptível e ainda não tenho certeza de quem é o favor sem um teste ...
$parent.scopevar
em ligações de dados dentro de uma ngIf irá corrigir coisas como questões criança escopos ao usar ngIf
ngIf
todos os lugares acreditando que isso melhorará o desempenho. Isso simplesmente não é verdade e não se pode dizer qual é o melhor, ngIf
ou ngShow
, sem um teste ou uma análise profunda no caso particular. Então, eu ainda recomendo esquecendo-se ngIf
, até que se vê mau desempenho ou sabe o que está fazendo
ng-if em ng-include e no ng-controller terão um grande impacto sobre ng-include, ele não carregará a parcial necessária e não será processada, a menos que o sinalizador seja verdadeiro no ng-controller, não carregará o controlador a menos que o sinalizador seja true, mas o problema é quando um sinalizador fica falso em ng - se ele for removido do DOM quando o sinalizador voltar verdadeiro, recarregará o DOM neste caso, ng-show é melhor, por uma vez mostre ng-se é melhor
Se você usar ng-show or ng-hide
o conteúdo (por exemplo, miniaturas do servidor), será carregado independentemente do valor da expressão, mas será exibido com base no valor da expressão.
Se você usar, ng-if
o conteúdo será carregado apenas se a expressão do ng-if for avaliada como verdadeira.
Usar ng-if é uma boa ideia em uma situação em que você irá carregar dados ou imagens do servidor e mostrá-los apenas dependendo da interação do usuário. Dessa forma, o carregamento da sua página não será bloqueado por tarefas desnecessárias e desnecessárias.
src
atributo da img
tag, quando presente, ela é carregada!