angulaire.js - Comment faire en sorte que Angular ng-hide prenne effet immédiatement?

Question

Comment Angular ng-hide prend-il effet immédiatement ?
Je dois définir $scope.isHide et ng-hide prendre effet avant d'exécuter le code suivant dans le contrôleur, par exemple dessiner un graphique basé sur la hauteur et la largeur du conteneur.

Dessiner un graphique sans le cacher sur le dom entraînera une erreur de hauteur du graphique.

Il peut être résolu en le cachant directement avec jquery. Comment le faire avec angulaire ?

html
<p class="container">
<p ng-hide='isHide' class="header"></p>
<p id="chart-container"></p>
</p>

controller
$scope.isHide = true; //Une fois qu'il doit prendre effet, c'est-à-dire masquer l'en-tête puis exécuter vers le bas
drawChartTo('chart-container');

En utilisant la disposition flexible, une fois l'en-tête masqué, le conteneur du graphique sera plus haut. drawChartTo dessine un graphique basé sur cette hauteur

Ce qui suit est une démonstration et une méthode de réparation de base pour prouver ce problème :
https://jsfiddle.net/q7t0d2q3/

Après une recherche, j'ai découvert que cela impliquait les principes de fonctionnement associés d'angularjs $digest. Pour résoudre ce problème, l'une consiste à attendre directement que le DOM soit rendu avant de dessiner le graphique, et l'autre consiste à laisser le graphique détecter le changement de hauteur du conteneur de graphique et à le redimensionner automatiquement. En dernière analyse, il s'agit d'un problème de synchronisation et d'asynchrone.

Informations associées :
http://tech.endeepak.com/blog...
https://blog.brunoscopelliti....
http://angular-tips.com/ blog/...

Answer 1

La bonne façon ici n'est pas de modifier ng-hide
mais d'encapsuler votre méthode de dessin de graphiques dans une directive

Answer 2

 ng-hide="true"

Answer 3

Attribuez d'abord la valeur, ng-hide = false, lorsque vous cliquez dessus ou lors d'un certain événement, ng-hide = true, et restituez le graphique en même temps

Answer 4

Je pense que vous pouvez le résoudre en utilisant ng-ifng-if 就可以解决

ng-if 是直接把这个东西从 DOM 中移除，而 ng-hide

ng-if supprime directement cette chose du DOM, tandis que ng-hide utilise simplement CSS pour masquer l'élément, et l'élément lui-même est toujours accessible via le nœud DOM trouvé 🎜

Answer 5

J'ai déjà rencontré un problème similaire. J'avais l'impression qu'après que ng-show/hide ait été défini sur true/false, cela ne prenait pas effet immédiatement. Essayez ceci.

$scope.isHide = true; 
$timeout(function(){drawChartTo('chart-container')})

Answer 6

<p ng-hide='isHide' class="header ng-hide"></p>
<p id="chart-container"></p>