[ngView] Comportement aléatoire au rafraichissement

**mezoo** · 20/10/2015, 16h25

Bonjour,

J'ai un soucis aléatoire depuis que j'utilise Material Design Lite avec Angularjs :

Bon :
Nom : Capture d’écran 2015-10-19 à 11.16.47.png
Affichages : 141
Taille : 16,3 Ko

Nom : Capture d’écran 2015-10-19 à 11.16.47.png
Affichages : 141
Taille : 16,3 Ko

Mauvais :

Nom : Capture d’écran 2015-10-19 à 11.16.31.png
Affichages : 152
Taille : 16,1 Ko

Il semble que parfois le CSS n'est pas chargé, mais le template de base Dashboard MDL fonctionne parfaitement ( sans script Angularjs)

Index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
  <head>
  <meta charset="utf-8">
  <title>title</title>
 
  <!-- META TAG -->
 
  <link rel="stylesheet" href="styles/material.indigo-deep_purple.min.css"/>
  <link rel="stylesheet" href="styles/styles.css">
  <link rel="stylesheet" href="styles/autocomplete.css">
  <link rel="stylesheet" href="styles/ngDialog.min.css"/>
  <link rel="stylesheet" href="styles/ngDialog-theme-default.min.css"/>
  <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
  </head>
  <body ng-app="tdcWebappApp">
 
   <div ng-view=""></div>
   </div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/ngDialog/js/ngDialog.min.js"></script>
 
<script src="scripts/material.min.js"></script>
<script src="scripts/autocomplete.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/main.js"></script>
 
 </body>
</html>

signin.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header" >
 <main class=" mdl-layout__content mdl-color--grey-100 ">
  <form>
   <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
    <div class="mdl-tabs__tab-bar">
      <a href="#identity" class="mdl-tabs__tab is-active">Identité</a>
      <a href="#registration" class="mdl-tabs__tab" >Adhésion</a>
      <a href="#activities" class="mdl-tabs__tab">Activités</a>
      <a href="#payment" class="mdl-tabs__tab" ng-click="display()">Règlement</a>
    </div>
 
    <div class="mdl-tabs__panel is-active" id="identity">
     ...
    </div>
    ...
   </div>
  </form>
 </main>
</div>

Pouvez vous m'expliquer d'où peut venir l'erreur ?

Merci

**slim** · 24/10/2015, 04h50

Et tu pense que c'est Angular qui lève une exception ?
Qu'as tu comme erreur ?

**Marco46** · 26/10/2015, 10h01

Envoyé par mezoo

Pouvez vous m'expliquer d'où peut venir l'erreur ?

Je ne sais pas si c'est la source de l'erreur mais angular-material est packagé pour bower. Là tu fais un import manuel depuis ton dossier script.

Sinon pour ton erreur, as-tu seulement un message d'erreur ?

A mon avis rien à voir avec Angular, il s'agit d'un problème purement CSS.

**b.marwane** · 26/10/2015, 11h40

Est ce que tu as une erreur dans la console ?
Est ce que tu as testé sur d'autres navigateurs ?

ça ressemble à une erreur que j'avais rencontré avec wordpress sur chrome, il fallait désactiver le slim painting dans chrome, voici un lien qui explique comment faire

**mezoo** · 26/10/2015, 12h22

Merci pour vos retour

Justement je n'ai pas aucune erreur ou exception levée
Je pense que ça viens d'un chargement de script (ou de CSS) parce que le template MDL fonctionne très bien sans script

Au template, j'ai ajouté la ng-view et le routage, c'est à ce moment là que tout part en cacahuète, je fais plusieurs rafraichissement pour revenir un l'écran souhaité

**mezoo** · 26/10/2015, 12h27

Envoyé par b.marwane

Est ce que tu as une erreur dans la console ?
Est ce que tu as testé sur d'autres navigateurs ?

ça ressemble à une erreur que j'avais rencontré avec wordpress sur chrome, il fallait désactiver le slim painting dans chrome, voici un lien qui explique comment faire

Oui j'ai tenté sur d'autre machine/browsers mais rien n'y fait avec ou sans modif du slim painting

**mezoo** · 26/10/2015, 12h29

Envoyé par Marco46

Je ne sais pas si c'est la source de l'erreur mais angular-material est packagé pour bower. Là tu fais un import manuel depuis ton dossier script.

Sinon pour ton erreur, as-tu seulement un message d'erreur ?

A mon avis rien à voir avec Angular, il s'agit d'un problème purement CSS.

Salut
Qu'est ce que tu suggères pour l'import bower ?
Le CSS provient du template qui fonctionne bien sans script et en mono page (index.html), ici j'ai index.html en page principal et les autres en view

**Marco46** · 26/10/2015, 13h47

Je veux dire que tu devrais importer angular-material via bower.

Dans ton bower.json :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
"angular-material": "~0.11.4",

**mezoo** · 29/10/2015, 14h44

Je n'ai toujours pas trouver la raison du problème
Pour moi elle vient de ngView sans savoir ce qui cloche dans mon code

quelqu'un a t il une piste ?

merci

[ngView] Comportement aléatoire au rafraichissement

AngularJS

Vue hybride

Discussions similaires

Partager

Partager