div avec ng-show, pas de mise à jour après l'appel ajax
Très nouveau pour anguleuses; je suis sûr que je suis absent quelque chose de vraiment évident.
J'ai un formulaire de connexion sur ma page. Ce que je veux c'est avoir la forme cacher après que l'utilisateur se connecte avec succès dans le.
Toute ma page utilise un contrôleur unique.
Voici le code HTML; j'ai enlevé tout, mais les champs de connexion, bien qu'il existe effectivement d'autres contenus à l'intérieur d'un même contrôleur:
<div ng-app="Localizer" ng-controller="StoreListCtrl" ng-init="my_occasion = ''">
<div ng-show="user_signed_in===false">
<div class="row"><h1>Have an account?</h1>
<p>Sign in to quickly access addresses saved to your account</p></div>
<div class="row">
<div class="data">
<input type="username" ng-model="username" name="username" data-placeholder="Username" />
</div>
<div class="data">
<input type="password" ng-model="password" name="password" data-placeholder="Password" />
</div>
<div class="data">
<div class="syo-acctSignBtn yButtonTemplate" ng-click="login_user()">Sign In<div class="btnArrow iconPosition"></div></div>
</div>
</div>
</div>
</div>
Lorsque l'utilisateur clique sur le bouton De connexion, une fonction appelée login_user()
s'exécute. Cela fonctionne; si je actualiser manuellement la page, je vois que je suis connecté et que la div qui doit être caché est caché. Mais sans actualisation de la page, le div reste visible, même si la variable il s'appuie sur (user_signed_in
) est mis à jour.
Voici la login_user
fonction dans ma commande, j'ai enlevé beaucoup de choses, y compris à l'avant-champ de fin de validation:
$scope.login_user = function() {
$.post('/site/ajax/login/do_login', {'username': $scope.username, 'password': $scope.password}, function(data) {
if (data.success) {
$window.user_state.status = $window.user_status_key.STATE_SIGNED_IN;
$scope.user_signed_in = $window.user_state.status == $window.user_status_key.STATE_SIGNED_IN;
console.log("user status: " + $window.user_state.status );
console.log("user status key: " + $window.user_status_key.STATE_SIGNED_IN);
console.log("scope.user_signed_in: " + $scope.user_signed_in);
} else {
Modal({
title: "Could not Login",
text: data['errMsg'],
yellow_button: {btn_text: "OK"}
});
}
});
};
C'est le résultat de la console.log
lignes:
statut de l'utilisateur: signé en
statut de l'utilisateur de la clé: signé en
la portée.user_signed_in: vrai
Depuis user_signed_in
n'est pas égale à false
, je m'attends à tout le contenu du formulaire affiché à l'intérieur de la <div ng-show="user_signed_in===false">
div à cacher. Mais il n'a pas (encore une fois, à moins que j'ai actualiser manuellement la page.) Ce qui me manque?
ng-show="!user_signed_in"
. Pourriez-vous définir un plunker ou jsfiddle montrant le problème.Avez-vous essayé ng-hide = "user_signed_in" ? Si vous êtes sûr que tout dans votre code est correct, alors il ya une chance que angulaire n'a pas fini de digérer son cycle. essayez d'utiliser $scope.$appliquer() juste avant l'écriture de la console.
OriginalL'auteur EmmyS | 2014-03-13
Vous devez vous connecter pour publier un commentaire.
Le problème, c'est que vous mettez à jour la variable (
user_logged_in
) à l'extérieur de l'angle de contexte, de sorte Angulaire sait rien à ce sujet (jusqu'à ce que vous actualisez la page, par exemple).Vous devriez envelopper le corps de votre rappel dans
$scope.$appliquer()
:(l'emphase est mienne)
BTW, vous ne pouvez pas faire face au même problème si vous avez effectué votre demande à l'aide du
$http
service, parce que c'est Angulaires-context-aware.$scope.login_user
la fonction et la variable est appelée$scope.user_signed_in
. Comment est-ce que en dehors de l'angle de contexte?OK, je ne comprends toujours pas pourquoi c'est hors contexte, dans ma version d'origine, de sorte que vous serais reconnaissant une explication. Cependant, je l'ai changé à l'aide de la
$http
service et il fonctionne. Donc, merci beaucoup.Je ne veux pas vous gâcher le plaisir, mais l'angle de la magie n'est pas si...magique. La différence lorsque vous apportez des changements à l'intérieur de l'angle de contexte (par exemple, dans un contrôleur ou à l'aide d'un Angulsr service), c'est que Angulaires prend soin de l' $appky choses de manière transparente. Fondamentalement, vous avez besoin de regarder dans Angulaire s digest cycle et de comprendre ce qui
$apply()
,$digest()
et$watch()
faire (j'ai trouver cet article pour être un bon point de départ et il ya beaucoup de grandes et detsiled réponses ici sur.Concernant votre question "pourquoi est-il en dehors de l'angle de contexte": la cession à La portée vatiables n'est pas dope dans le contrôleur (comme vous semblez le croire). Au lieu d'une fonction de rappel est enregistré avec jQuery
post
méthode. Ensuite, le contrôleur de fonction complète de l'exécution. Dès que jQuery obtient une réponse de la mise à jour de la portée des variables, mais sur le moment Angulaire ne sait rien à ce sujet (nous avons donc explicitement lancer un recueil de cycle, de sorte que Angulaires se lève-à-jour avec toutes les modifications dans le modèle).OriginalL'auteur gkalpak
OriginalL'auteur Rahul Modi