[ngView] Comportement aléatoire au rafraichissement

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

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

Bon :
Pièce jointe 190628

Mauvais :
Pièce jointe 190629

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:

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:

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

24/10/2015, 04h50
slim

Et tu pense que c'est Angular qui lève une exception ?
Qu'as tu comme erreur ?
26/10/2015, 10h01
Marco46

Citation:

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.
26/10/2015, 11h40
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
26/10/2015, 12h22
mezoo

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é
26/10/2015, 12h27
mezoo

Citation:

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
26/10/2015, 12h29
mezoo

Citation:

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
26/10/2015, 13h47
Marco46
Je veux dire que tu devrais importer angular-material via bower.

Dans ton bower.json :
Code:

1 2 "angular-material": "~0.11.4",
29/10/2015, 14h44
mezoo

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