J'ai lu des discussions sur ce numéro telles que: La vue n'est pas mise à jour en angularjs mais je ne peux toujours pas comprendre comment l'appliquer sur mon exemple simple.
J'ai cette fonction: quand Mon modèle ressemble à ceci (si nécessaire Pour la question) - il n'a pas de code angularjs à l'intérieur de celui-ci: MyModel est mis à jour ailleurs dans le code (lorsque l'utilisateur clique sur, interagit, envoyer des demandes XHR), il ne met pas à jour ma vue. Je comprends que j'ai besoin de faire quelque chose avec $ s'appliquer mais je n'ai pas compris où et comment.
4 Réponses :
essaisez $ portée. $ Apply () Dans votre contrôleur après avoir mis à jour votre modèle
À l'intérieur de mon contrôleur $ Scope n'est pas défait comme vous pouvez le voir dans jsfiddle.net/dak8r/2
Cela fonctionne bien. Mais pourriez-vous s'il vous plaît expliquer pourquoi c'est nécessaire? Il convient de réfléchir par défaut comme des promesses angulaires reliure de données à deux voies
Votre problème est double.
1) Il y avait une erreur de syntaxe dans votre jsfiddle, comme les domestions (telles que la récupération de $ (ceci) à l'intérieur de votre clickhandler n'ont pas de défaillance de défaut. Vous devez réellement passer un événement. (problème de syntaxe mineure).
2) en mettant votre définition variable dans la portée des contrôleurs, comme: Vous vous assurez qu'il est exécuté une fois par classe d'instanciation. ce que vous voulez est: puis sur votre lien pour un codes échantillon plus exhaustif Voir le Jsfiddle lié. Un bon aperçu de la théorie peut être trouvé dans la première conversation ici: http://www.youtube.com/watch?feature=player_eCedded&v=vxun6wo3tia
Les contrôleurs ne sont pas des singletons. Vous pouvez instancier plusieurs fois MyCtrl sur la même page. Vous êtes peut-être confondre des services avec des contrôleurs - les services sont des singletons.
Le creux de votre problème est que vous essayez de mélanger les angularjs avec un modèle JavaScript très traditionnel, "jQuery-Soupe". En angulaire, vous devez toujours utiliser des directives pour faire la manipulation et l'interaction DOM (y compris les clics). Dans ce cas, votre code devrait ressembler davantage à ce que les suivants:
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;
}
Pourquoi avez-vous besoin var _this = ceci; ?
Dans les applications angulaires, les modèles sont html: voici un violon , sans jQuery, et il montre la" voie normale "de configurer un violon pour angulaire. Normalement parfois implémentés sur $ de portée, non comme un objet JavaScript séparé. Voici une réécriture de votre application montrant comment faire ce
Les meilleures pratiques de l'angularjs sont souvent citées que "" "La portée n'est pas votre modèle. La portée est ce que vous attachez votre modèle à." Pour des contrôleurs très simples, ce genre de chose peut aller bien, mais nous voudrez normalement avoir votre propre couche de modèle.
@Brandon, merci pour le lien vidéo (je n'avais pas encore vu celui-là). Je sens que je comprends maintenant cette phrase à partir du Portée Page: "La portée est un objet qui se réfère au modèle d'application. " Voyez-vous des services comme moyen de définir la couche de modèle? Sinon, où recommandez-vous des modèles être définis? Êtes-vous au courant de bons exemples d'applications angulaires qui ont une couche de modèle distincte?
FYI pour d'autres lecteurs, dans d'autres échanges de commentaires avec Brandon, je pense qu'il dirait que les services sont l'endroit idéal pour définir les modèles. Par exemple, voir Cette réponse par Brandon.
Woah, petit monde! (Désolé, je n'ai jamais revenu à ce commentaire.) Les services sont particulièrement bons pour les objets modèles car ils peuvent être injectés et ainsi se moquer facilement dans des tests.
Il n'y a pas assez de code ici pour vous dire précisément ce qui ne va pas. Pouvez-vous nous montrer un exemple d'interaction qui provoque la mise à jour du modèle, mais pas la vue? Si vous avez un exemple de travail sur Jsfiddle ou similaire, c'est encore mieux.
Si vous pouviez peut-être poster un extrait de votre code de vue, indiquez comment il interagit avec le contrôleur et où il s'attend à MyModel, ce serait fantastique. Également utile serait si vous pouviez quelque peu enfiler la fonction MyModel. Comme Brandon l'a dit ci-dessus, ce que vous avez là-bas, vous n'êtes pas vraiment suffisant pour la télé vous ce qui se passe.
@Brandontilley, j'ai ajouté un exemple de jsfiddle: jsfiddle.net/dak8r/1
@AbraHamp, j'ai ajouté un jsfiddle ..
J'ai corrigé un problème - il s'agit de la version mise à jour: jsfiddle.net/dak8r/2