Discussion :

[topolino]

Bonjour

Pourquoi dans un cas (message) tous se rafraichit et pas dans l'autre (data.message).

Code :

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

1
2
3
4
5
6
function FirstCtrl($scope) {
 
}
function SecondCtrl($scope) {
 
}

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
<div ng-app="">
  <input type="text" ng-model="message">
  <h1>{{ message }}</h1>
 
  <div ng-controller="FirstCtrl">
    <input type="text" ng-model="message">
    <h1>{{ message }}</h1>
  </div>
 
  <div ng-controller="SecondCtrl">
    <input type="text" ng-model="message">
    <h1>{{ message }}</h1>
  </div>
</div>

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
<div ng-app="">
  <input type="text" ng-model="data.message">
  <h1>{{ data.message }}</h1>
 
  <div ng-controller="FirstCtrl">
    <input type="text" ng-model="data.message">
    <h1>{{ data.message }}</h1>
  </div>
 
  <div ng-controller="SecondCtrl">
    <input type="text" ng-model="data.message">
    <h1>{{ data.message }}</h1>
  </div>
</div>

merci pour vos conseil.

[Marco46]

Tu as du te planter.

Petit plunker de démo.

Tout se rafraichit dans tous les cas.

Cela se rafraichit car les scopes héritent les uns des autres. Donc lorsque tu set ta valeur message (ou data.message) au niveau de l'app, les contrôleurs vont hériter de la valeur pour message (ou data.message).

[topolino]

Non tu verras que cela n'a pas le meme comportement.
Tape un mot dans le 1er champ de saisie, puis dans le second et ainsi de suite ......

Tu verras que dans un cas cela continura à rafraichir les autres champs mais pas dans l'autre.

[Marco46]

J'ai mis à jour le plunker pour que l'affichage soit plus compréhensible et qu'on puisse en parler.

Les scopes héritent entre eux sur la base du dom. Ils héritent tous du rootscope.

Dans notre exemple la hiérarchie des scopes est la suivante :

Code :

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

1
2
3
4
5
 
rootscope > input 1 > FirstCtrl
rootscope > input 1 > SecondCtrl
rootscope > input 2 > ThirdCtrl
rootscope > input 2 > FourthCtrl

Lorsqu'un scope est modifié, ses enfants bénéficient de la modification via l'héritage par prototype de javascript.
Cela signifie que si tu modifies input 1, FirstCtrl et SecondCtrl bénéficient de la modif, sauf s'ils ont eux même modifié la valeur.
Donc si tu donnes comme valeur à input 1 "aaa", FirstCtrl et SecondCtrl vont prendre pour valeur "aaa". Mais si tu modifies SecondCtrl, en lui donnant pour valeur "bbb", seul ce scope aura cette valeur.

J'espère que c'est plus clair.

[topolino]

bof, on est bien d'accord que si
tu changes la valeur de input 2 ou ThirdCtrl input ou FourthCtrl input alors input 2 et ThirdCtrl input et FourthCtrl input changent en meme temps.
mais si tu changes la valeur de input 1 ou FirstCtrl input ou SecondCtrl input alors ca impecte que le input concerné.

La seule difference c'est data.Message au lieu de message.

[Marco46]

on est bien d'accord que si
tu changes la valeur de input 2 ou ThirdCtrl input ou FourthCtrl input alors input 2 et ThirdCtrl input et FourthCtrl input changent en meme temps.

Non !

Si tu changes input 2, alors ThirdCtrl input ou FourthCtrl input prennent la même valeur que input 2, ça ok.
Mais si tu changes ThirdCtrl input, seul ce dernier est affecté. Pareil pour FourthCtrl.

C'est du à la hiérarchie des scopes et à l'héritage par prototype qui sert de base à cette hiérarchie.

mais si tu changes la valeur de input 1 ou FirstCtrl input ou SecondCtrl input alors ca impecte que le input concerné.

Non pas du tout. La hiérarchie basée sur input 1 est identique à celle basée sur input 2.

La seule difference c'est data.Message au lieu de message.

C'est une différence sur le contenu du modèle, dans un cas (message) tu as une propriété simple. Dans l'autre cas (data.message), tu as un objet qui a une propriété nommée message. Cela ne change rien du tout au fonctionnement de la hiérarchie des scopes et à l'héritage par prototype.

Dans le cas de message tu as :

Code :

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

1
2
 
$scope.message = "ta_valeur";

Dans le cas de data.message tu as :

Code :

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

1
2
 
$scope.data = { message: "ta_valeur" };

[topolino]

Y a un probleme alors

Si tu changes input 2, alors ThirdCtrl input ou FourthCtrl input prennent la même valeur que input 2, ça ok.
Mais si tu changes ThirdCtrl input, seul ce dernier est affecté. Pareil pour FourthCtrl.

Pour ma part si je change input 2 ou ThirdCtrl input ou FourthCtrl alors ils changent tous les 3.

[Marco46]

T'as testé sur le plunker que j'ai linké ?

[topolino]

oui avec chrome et IE. Bizarre !!!!

[Marco46]

Effectivement je viens de tester sur Chrome et ça ne fonctionne pas correctement avec un objet

Je poserai la question sur la mailing angular ce soir mais c'est absolument pas normal d'avoir 2 comportements différents en fonction du browser !

[topolino]

Pour ma part Chrome et IE ont le meme fonctionnement

[Marco46]

En fait l'héritage par prototype n'affecte que les primitives. Donc dans notre exemple il est normal d'avoir une différence de comportement entre message et data.message.

Ce que je ne comprends pas toujours pas c'est comment j'ai pu obtenir un comportement différent hier soir dans mon FF, car aujourd'hui je le même comportement que toi dans tous mes navigateurs !

J'étais ptet naze je sais pas.

Donc au final, le comportement normal en 2-way databindings c'est que le même modèle est modifié quelque soit l'endroit où l'on se trouve (input 2, ou ThirdCtrl, peu importe). En fait le scope pointe sur le même objet dans les 2 cas, il est donc normal que l'objet soit modifié et que la vue rende la modification partout.
Mais dans le cas où l'on va avoir $scope.message, il s'agit d'une primitive, et là c'est l'héritage par prototype de js qui s'applique.

La bonne pratique conseillée est de toujours utiliser un objet pour rendre le modèle dans une vue.

Donc toujours faire data.message et jamais message directement.

En d'autres termes :

Code :

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

1
2
3
4
5
6
7
 
// Pas bien !
$scope.prop1 = prop1;
$scope.propN = propN;
 
// Bien !
$scope.obj = obj;

[topolino]

Merci à toi c'est plus clair