L'affichage n'est pas mis à jour lorsque le modèle est mis à jour en AngularJS

J'ai lu des discussions sur ce problème comme: L'affichage n'est pas mis à jour dans AngularJS mais je n'arrive toujours pas à comprendre comment l'appliquer sur mon exemple simple.

J'ai cette fonction:

function MyPageView($scope) {
  var myModel = new MyModel();
  $scope.myModel = myModel;
}

quand myModel est mis à jour ailleurs dans le code (lorsque l'utilisateur clique, interagit, d'envoyer des demandes XHR) qu'il n'a pas de mise à jour de mon point de vue. Je comprends que j'ai besoin de faire quelque chose avec $s'appliquent, mais je n'ai pas compris où et comment.

Quelqu'un peut m'expliquer comment puis-je résoudre ce problème pour ce simple cas d'utilisation?

Mon modèle ressemble à quelque chose comme ceci (si cela est nécessaire pour la question) - il n'a pas d'AngularJS code à l'intérieur de celui-ci:

var MyModel = function() {
  var _this = this;
  ...
  _this.load = function(){...};
  _this.updateModel = function(){...};
  ...
  return _this;
}

l'ajout d'un JSfiddle exemple: http://jsfiddle.net/DAk8r/2/

Il n'y a pas assez de code ici pour vous dire précisément quel est le problème. Pouvez-vous nous montrer un exemple d'une interaction qui est à l'origine du modèle de mise à jour, mais pas la vue? Si vous avez un exemple de travail sur jsFiddle ou similaire, c'est encore mieux.
Si vous pourriez peut-être poster un extrait de votre code de vue, en montrant comment il interagit avec le Contrôleur et où il attend monmodèle, ce serait fantastique. Aussi utile serait si vous pouviez la chair au Monmodèle fonction quelque peu. Comme Brandon dit ci-dessus, ce que vous avez là n'est pas vraiment suffisant pour télé ce qui se passe.
J'ai ajouté un JSfiddle exemple: jsfiddle.net/DAk8r/1
J'ai ajouté un JSfiddle..
J'ai corrigé un problème il y a - c'est la version mise à jour: jsfiddle.net/DAk8r/2

OriginalL'auteur Alon | 2013-01-17

9

Le cœur de votre problème est que vous êtes en train de mélanger AngularJS avec une très traditionnel, "jQuery-soupe de style" JavaScript modèle. Dans Angulaire, vous devez toujours utiliser les directives pour faire de manipulation du DOM et de l'interaction (y compris les clics). Dans ce cas, votre code devrait ressembler à la suivante:
```
<div ng-controller="myModelCtrl">
  <div>Number is {{myModel.number}}</div>
  <a ng-click="myModel.updateNumber()">Update Number</a>
</div>
```
```
function myModelCtrl($scope) {
   var myModel = new MyModel();
   $scope.myModel = myModel;
}

function MyModel() {
  var _this = this;

  _this.number = 0;

  _this.updateNumber = function() {
     _this.number += 1;
    alert('new number should display ' + _this.number);
  }

  return _this;
}
```
Notez comment, au lieu de mettre en place un manuel de click gestionnaire avec jQuery, nous utilisons Angulaire intégré dans ng-click directive. Cela nous permet de nous attacher à l'angle de la portée du cycle de vie, et de mettre à jour correctement la vue lorsque l'utilisateur clique sur le lien.

Voici une citation de la AngularJS FAQ; j'ai mis en caractères gras une partie qui pourrait vous aider à briser l'habitude.

Les Pièges Les Plus Courants

Angulaire de la chaîne de prise en charge (#angularjs sur Freenode) voit un certain nombre d'écueils récurrents que les nouveaux utilisateurs de l'Angulaire de l'automne. Ce document vise à point avant de vous découvrir à la dure.

De Manipulation du DOM

Arrêter d'essayer d'utiliser jQuery pour modifier le DOM dans les contrôleurs. Vraiment. Qui comprend l'ajout d'éléments, la suppression d'éléments, la récupération de leur contenu, en les montrant et en les cachant. L'utilisation intégrée dans les directives, ou écrire votre propre si nécessaire, pour faire votre manipulation du DOM. Voir ci-dessous sur la duplication de la fonctionnalité.

Si vous avez du mal à rompre avec l'habitude, envisager la suppression de jQuery à partir de votre application. Vraiment. Angulaire a le $service http et puissant directives qui font qu'il est presque toujours inutile. Angulaire est livré jQLite a une poignée de fonctionnalités les plus couramment utilisés dans l'écriture Angulaire directives, en particulier de la liaison à des événements.

Enfin, voici votre exemple, en travaillant à l'aide de cette technique: http://jsfiddle.net/BinaryMuse/xFULR/1/

Pourquoi avez-vous besoin var _this = this;?

OriginalL'auteur Michelle Tilley
10

essayez $scope.$appliquer() à l'intérieur de votre contrôleur après la mise à jour de votre modèle

À l'intérieur de mon contrôleur de $scope n'est pas defeinded comme vous pouvez le voir dans jsfiddle.net/DAk8r/2
Cela fonctionne très bien. Mais pourriez-vous expliquer pourquoi c'est nécessaire. Il doit refléter par défaut angulaire promesses les deux sens de la liaison de données

OriginalL'auteur Kaushik Shrestha
1

http://jsfiddle.net/zCC2c/

Votre problème est double.

1) Il y a une erreur de syntaxe dans votre jsfiddle, comme DOMElements (comme l'a renvoyé par $(this) à l'intérieur de votre clickhandler ont pas de prévenir par défaut. Vous avez réellement besoin pour passer un événement. (Petite syntaxe de l'émission).

2) En mettant votre définition de la variable à l'intérieur de l'contrôleurs de la portée de la sorte:
```
 function MyCtrl($scope){
     $scope.foo = foo;
 }
```
Vous assurer qu'il est exécuté une fois par instanciation de classe.

Ce que vous voulez, c'est:
```
 function MyCtrl($scope){
      $scope.someAngularClickHandler=function(){
         $scope.foo = foo;
      }
 }
```
Puis sur votre lien
```
   <a href="foo" id="bar" ng-click="someAngularClickHandler()">
```
Pour une plus exhaustive codesample voir le lié jsfiddle.

Un bon aperçu de la théorie peut être trouvé dans le premier exposé ici:

http://www.youtube.com/watch?feature=player_embedded&v=VxuN6WO3tIA

Les contrôleurs ne sont pas des singletons. Vous pouvez instancier MyCtrl plusieurs fois sur la même page. Peut-être que vous confondez services avec les contrôleurs -- services sont des singletons.

OriginalL'auteur Abraham P
0

Angulaire applications, les modèles sont ~~normalement~~ parfois mis en œuvre sur une tranche de portée, pas comme indépendante de l'objet JavaScript. Voici une réécriture de votre application montrant comment faire
```
function myModelCtrl($scope) {
  $scope.number = 0;
  $scope.updateNumber = function () {
    $scope.number += 1;
    alert('new number should display ' + $scope.number);
  }
}
```
HTML:
```
<div ng-controller="myModelCtrl">
  <div>Number is {{number}}</div> 
  <a ng-click="updateNumber()">Update Number</a>
</div>
```
Voici un violon, sans jQuery, et il montre la "voie normale" de la mise en place d'un violon Angulaire.

AngularJS la meilleure pratique est souvent cité que "Champ d'application n'est pas votre modèle. La portée est ce que vous attachez votre modèle." très simple contrôleurs, ce genre de chose peut-être bien, mais normalement, vous aurez envie d'avoir votre propre modèle en couche.
merci pour le lien vidéo (je n'avais pas vu que l'on pas encore). Je me sens maintenant, je comprends cette phrase à partir de la Portée de la page: "champ d'application est un objet que renvoie pour le modèle d'application." Voyez-vous des services comme un moyen de définir le modèle de couche? Si non, où voulez-vous recommander des modèles? Connaissez-vous des exemples de bonnes Angulaire des applications qui ont un autre modèle de couche?
Pour info pour les autres lecteurs, dans d'autres commentaires échanges avec Brandon, je pense qu'il serait dire que les services sont le lieu de définir les modèles. Voir, par exemple, cette réponse par Brandon.
Woah, le monde est petit! (Désolé, je n'ai jamais eu de retour à ce commentaire.) Les Services sont particulièrement bonnes pour les objets de modèle, car ils peuvent être injectés, et donc facilement se moquaient de tests.

OriginalL'auteur Mark Rajcok

Vous devez vous connecter pour publier un commentaire.

Les Pièges Les Plus Courants

De Manipulation du DOM