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" };