web-dev-qa-db-fra.com

Comment empêcher le spectacle d'élément avant AngularJS initialisé

Dans AngularJS, je me demande comment éviter que les éléments montrés à la page avant que ng-show ne prenne effet, j'ai trouvé quelques articles qui parlent de ng-cloak, mais il semble que cela ne fonctionne pas dans mon cas. plutôt que le style Element.

Une autre façon de parler est de définir un style avant d’initialiser AngularJS, mais c’est un peu difficile à gérer.

Existe-t-il un moyen officiel de gérer cela?

angularjsng-show
14
Kuan

Si vous ne voulez pas montrer un chargeur, ng-cloak devrait être votre solution. 

Documentation officielle sur ng-cloak

Si le problème persiste, vous pouvez essayer d'ajouter l'élément CSS à masquer avec ng-cloak dans votre code HTML pour vous assurer que le navigateur le contient bien à temps.

Si vous faites cela, choisissez en chemin d'ajouter le ng-cloak . Par exemple, ajoutez-le en tant que classe:

<div ng-show="condition" class="ng-cloak">...</div>

Et ajoutez ceci dans votre balise HTML:

<style> .ng-cloak { display: none !important; } </style>
22
Yoann

Si vous voulez simplement éviter de montrer quelque chose avant que ce soit prêt (certaines données ont peut-être été chargées depuis le backend), il est préférable d'utiliser ng-if. Bien sûr, cela fonctionne de la même façon avec ng-show. Mais l'avantage de l'utilisation de ng-if est que vous retardez la création du DOM supplémentaire jusqu'à ce qu'il soit nécessaire de l'afficher, ce qui améliore le temps de chargement initial de la page.

Voici un exemple:

var myApp = angular.module('myApp', []);


   
myApp.controller("myController", function ($scope, $timeout) {

    $scope.isLoading = false;
    $scope.data = null;
    
    simAsync();

    //simulate async task like http request
    function simAsync() {
        //loadind data has started
        $scope.isLoading = true;

        $timeout(function () {
            $scope.data = [{
                "firstname": "Sims",
                    "lastname": "Wilkerson"
            }, {
                "firstname": "Kelli",
                    "lastname": "Vazquez"
            }, {
                "firstname": "Mcdonald",
                    "lastname": "Byrd"
            }, {
                "firstname": "Taylor",
                    "lastname": "Frost"
            }, {
                "firstname": "Merle",
                    "lastname": "Adkins"
            }, {
                "firstname": "Garrett",
                    "lastname": "Hood"
            }];
            //the data has loaded
            $scope.isLoading = false;
        }, 1500);
    }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    
</div>

5
Christos Baziotis

Utilisez un chargeur tel que celui-ci:

JS

 angular.element(document).ready(function(){
      $('.loading').remove(); // Just an example dont modify the dom outside of a directive in a real app!
      alert('Loaded!'); 
    });

CSS

.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #000;
}

D&EACUTE;MO

http://codepen.io/nicholasabrams/pen/MwOMNR

Je viens de répondre à un sujet similaire ici: Angularjs tab Chargement de spinner lors du rendu

1
Alpha G33k

2 alternatives pour éviter complètement le problème:

<span ng-bind="expression_without_braces"></span>

Il est préférable d’utiliser ngBind au lieu de {{ expression }} si un modèle est momentanément affiché par le navigateur dans son état brut avant que AngularJS ne le compile. ngBind étant un attribut d'élément, il rend les liaisons invisibles pour l'utilisateur pendant le chargement de la page.

  • utilisez ui-router pour conserver le code HTML dans des fichiers séparés, qui ne seront chargés/analysés/injectés que si cela est nécessaire et uniquement lorsque le contrôleur est initialisé.

Voici le tutoriel hello world modifié pour utiliser un fichier HTML séparé:

// helloworld.js
var myApp = angular.module('helloworld', ['ui.router']);

myApp.config(function($stateProvider) {
  var helloState = {
    name: 'hello',
    url: '/hello',
    templateUrl: 'helloworld.html'
  }

  $stateProvider.state(helloState);
});

<!-- helloworld.html -->
<h3>hello world!</h3>

<!-- index.html -->
<html>
  <head>
    <script src="lib/angular.js"></script>
    <script src="lib/angular-ui-router.js"></script>
    <script src="helloworld.js"></script>
  </head>

  <body ng-app="helloworld">
    <a ui-sref="hello" ui-sref-active="active">Hello</a>

    <ui-view></ui-view>
  </body>
</html>
0
DJDaveMark