Angularjs - ng-manteau/ng-show éléments de clignotement

Comme mentionné dans la documentation, vous devez ajouter une règle CSS pour masquer sur la base de la ng-cloak attribut:

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

Nous utilisons des astuces similaires sur le "Construit Angulaire" sur le site, dont vous pouvez voir la source sur Github: https://github.com/angular/builtwith.angularjs.org

Espère que ça aide!

Je n'ai jamais eu beaucoup de chance en utilisant ngCloak. Je reçois toujours vacillante, en dépit de tout ce qui est mentionné ci-dessus. Le seul moyen infaillible pour éviter le claquement est de mettre votre contenu en un modèle et d'inclure le modèle. Dans un SPA, le seul HTML qui sera évalué avant d'être compilé par Angulaire est votre principale index.html page.

Il suffit de prendre à l'intérieur tout le corps et de le coller dans un fichier distinct, puis:

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

Vous ne devriez jamais obtenir toute scintillante de cette façon que Angulaires de compiler le modèle avant de l'ajouter au DOM.

En plus de la accepté de répondre si vous utilisez une autre méthode de déclenchement ng-manteau...

Vous pouvez également ajouter des spécificités de votre CSS/LESS:

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

J'ai eu un problème où un <div ng-show="expression"> serait d'abord visible pour une fraction de seconde, même si "expression" a d'abord été faux, avant de la ng-show directive eu une chance de s'exécuter.

La solution que j'ai utilisé était pour ajouter manuellement le "ng-hide" de la classe, comme dans <div ng-show="expression" ng-hide>, pour s'assurer qu'il a commencé d'abord caché. La ng-show directive va ajouter/retirer la ng-hide classe comme nécessaire par la suite.

Il y a en fait deux problèmes qui peuvent causer le scintillement question et vous pourriez être confronté à l'un ou les deux de ces.

Problème 1: ng-manteau est appliqué trop tard

Ce problème est résolu comme décrit dans beaucoup de réponses sur cette page est de faire en sorte AngularJS est chargé dans la tête. Voir ngCloak doc:

Pour le meilleur résultat, angular.js le script doit être chargé dans la tête
la section du fichier html; sinon, la règle css (ci-dessus) doit être
inclus dans la feuille de style externe de l'application.

Problème 2: ng-manteau est retiré trop tôt

Ce problème est plus susceptible de se produire lorsque vous avez beaucoup de CSS sur votre page avec les règles en cascade sur l'un de l'autre et les couches les plus profondes de CSS, flash, avant que la couche supérieure est appliquée.

Le jQuery solutions dans les réponses concernant l'ajout de style="display:none" à votre élément de résoudre ce problème tant que le style est enlevé assez tard (en fait, ces solutions de résoudre les deux problèmes). Toutefois, si vous préférez ne pas ajouter des styles directement dans votre code HTML, vous pouvez obtenir les mêmes résultats en utilisant ng-show.

Partir de l'exemple de la question:

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

Ajouter un supplément de ng-show de la règle sur votre élément:

<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>

(Vous avez besoin de garder ng-cloak pour éviter le problème 1).

Ensuite dans votre application.courir ensemble isPageFullyLoaded:

app.run(['$rootScope', function ($rootScope) {
    $rootScope.$safeApply = function (fn) {
        $rootScope.isPageFullyLoaded = true;
    }
}]);

Être conscient que selon exactement ce que vous faites, app.peut ou peut ne pas être le meilleur endroit pour mettre en isPageFullyLoaded. La chose importante est de s'assurer que isPageFullyLoaded obtient mis à vrai, après tout ce que vous ne voulez pas de scintillement est prêt à être révélé à l'utilisateur.

Il sonne comme Problème 1 est le problème de l'OP est frappant, mais d'autres sont d'avis que la solution ne fonctionne pas ou seulement partiellement œuvres parce qu'ils sont frapper Problème 2 à la place ou en tant que bien.

Remarque importante: assurez-vous d'appliquer des solutions à la fois ng-manteau appliquée trop tard ET retiré à bientôt. La résolution de seulement un de ces problèmes ne peuvent soulager les symptômes.

Pour ce que ça vaut, j'ai eu un problème similaire ng-manteau ne fonctionne pas. Il peut être utile de vérifier votre application/site avec le cache activé à la réutilisation des fichiers source pour voir si cela aide.

Avec ma course, avec le scintillement, j'ai été le tester avec DevTools ouvrir et cache désactivé. La sortie du panneau fermé avec le cache activé fixé mon problème.

Je n'arrivais pas à obtenir une de ces méthodes pour travailler, donc je l'ai finalement fait le suivre. Pour l'élément que vous souhaitez initialement masqué:

<div <!--...--> style="display: none;" ng-style="style">

Puis dans votre contrôleur, ajoutez ceci à ou près du haut:

$scope.style = { display: 'block' };

De cette façon, l'élément est d'abord caché, et affiche uniquement lorsque le contrôleur de code est exécuté.

Vous pouvez régler le placement de vos besoins, peut-être l'ajout d'un peu de logique. Dans mon cas, j'ai passer un chemin de connexion si vous n'avez pas connecté, et ne voulait pas de mon interface de scintillement à l'avance, j'ai donc mis $scope.style après la session de la vérification de l'.

Je suis en utilisant ionique cadre, l'ajout de style css peut ne pas fonctionner dans certains cas, vous pouvez essayer d'utiliser ng-si, au lieu de ng-show /ng-hide

ref: https://books.google.com.my/books?id=-_5_CwAAQBAJ&pg=PA138&lpg=PA138&dq=ng-show+hide+flickering+in+ios&source=bl&ots=m2Turk8DFh&sig=8hNiWx26euGR2k_WeyaVzdixJ8k&hl=en&sa=X&redir_esc=y#v=onepage&q=ng-show%20hide%20flickering%20in%20ios&f=false

J'ai essayé le ng-manteau solution ci-dessus, mais il a encore des problèmes intermittents avec Firefox.
La seule solution qui a fonctionné pour moi est de retarder le chargement de la forme jusqu'à ce Angulaire est entièrement chargé.

J'ai simplement ajouté ng-init dans l'application et l'utilisation ng-si le formulaire de droite pour vérifier si la variable I jeu est déjà chargé.

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

J'ai essayé toutes les solutions posté ici et encore vacillante dans Firefox.

Si ça aide quelqu'un, je l'ai résolu en ajoutant style="display: none;" à la div du contenu principal, puis à l'aide de jQuery (j'étais déjà sur la page) $('#main-div-id').show(); une fois que tout a été chargé, après l'obtention de données à partir du serveur;

J'ai essayé toutes les réponses ci-dessus et rien n'a fonctionné. À l'aide ionique de développer une application hybride et été d'essayer de faire un message d'erreur pas de scintillement. J'ai fini par résoudre mon problème en ajoutant une ng-hide classe de mon élément. Mon div a déjà ng-show pour afficher l'élément quand il ya une erreur. L'ajout de ng-hide ensemble de la div ne s'affiche pas avant angulaire est chargé. Pas de ng-manteau ou en ajoutant angulaire de la tête nécessaire.

Je suis en utilisant ng-show dans une directive, d'afficher et de masquer les fenêtres pop-up.

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

Aucun des ci-dessus a fonctionné pour moi, et à l'aide de ng-si, au lieu de ng-show serait inutile. Cela impliquerait la suppression et l'ajout de l'ensemble de la popup de contenu dans les DOM, à chaque clic. Au lieu de cela, j'ai ajouté un ng-si dans le même élément afin de s'assurer qu'il n'apparaît pas sur le document à charge:

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

Par la suite j'ai ajouté de l'initialisation dans le contrôleur responsable de la présente directive, avec un délai d'attente:

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

De cette façon, j'ai éliminé le problème de scintillement et d'éviter la coûteuse opération de DOM insertion à chaque clic. Cela est arrivé à une charge à l'aide de deux portée des variables pour le même but, au lieu d'une, mais jusqu'à présent, c'est certainement la meilleure option.

Aucune des solutions présentées ci-dessus ont travaillé pour moi. J'ai alors décidé de regarder de la fonction réelle et se rendit compte que lorsque “$champ d'application.watch ” a été tiré, c'était de mettre une valeur dans le champ nom qui n'était pas censé être le cas. Ainsi, dans le code que j'ai mis et oldValue et newValue puis

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

Essentiellement lorsque la portée.la montre est déclenché dans ce cas, AngularJS surveille les modifications apportées à la variable de nom (le modèle.valeur)

Personnellement, j'ai décidé d'utiliser le ng-class attribut plutôt que de la ng-show. J'ai eu beaucoup plus de succès d'aller dans cette voie en particulier pour les fenêtres pop-up qui sont toujours pas affichés par défaut.

Ce <div class="options-modal" ng-show="showOptions"></div>

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

avec le CSS pour les options-classe modale étant display: none par défaut. La classe d'exposition contient les display:block CSS.