Service de variables qui ne sont pas mise à jour dans le contrôleur

J'ai un NavbarCtrl qui est en dehors de ng-view. J'ai une connexion contrôleur qui parle à un service pour obtenir un utilisateur connecté. Une fois que l'utilisateur est connecté, je veux que la barre de navigation pour mettre à jour avec l'adresse email de l'utilisateur. Cependant, pour la vie de moi, je n'arrive pas à obtenir la barre de navigation de la portée de la mise à jour avec les données chargées dans mon "Auth" service une fois que l'utilisateur est connecté.

C'est ma principale index.html:

<div class="navbar navbar-inverse navbar-fixed-top">

        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">Brim</a>

                <div class="pull-right"  ng-controller="NavbarCtrl">
                    <div ng-click="refresh()">hello</div>
                    {{ user.email }}
                </div>
            </div>
        </div>

    </div>

    <div class="container" ng-view>

Et mon service:

.factory('Auth', function($resource) {
    var authenticated = false;
    var user = {};
    return {
        isAuthenticated: function () {
            return authenticated;
        },
        getUser: function() {
            return user;
        },
        login: function(loginUser, callback) {
            user =  {email:'[email protected]'}
            authenticated = true;
            callback(true);
            //actual code for logging in taken out for brevity
        }
    }
})

Et mon Login et Navbar contrôleurs:

function LoginCtrl($scope, $location, Auth) {

$scope.login = function() {
    Auth.login($scope.user, function(success) {
        if(success) $location.path('/dashboard');
        //console.log(Auth.getUser())
    });
}

}

function NavbarCtrl($scope, Auth)  {

//thought this should work
$scope.user = Auth.getUser();

//experimenting unsuccessfully with $watch
$scope.$watch(Auth.isAuthenticated(),function () {
    $scope.user = Auth.getUser()
})

//clicking on a refresh button is the only way I can get this to work
$scope.refresh = function() {
    $scope.user = Auth.getUser()
}
}

De ma recherche, j'aurais pensé que $champ d'application.utilisateur = Auth.getUser(); mais il n'est pas et je suis à une perte complète de la façon dont comment je peux obtenir ma barre de navigation mis à jour lorsqu'un utilisateur est connecté. Merci d'avance pour toute aide.

Un peu hors-sujet, mais n'auriez-vous pas aussi de perdre la trace de l'utilisateur authentifié sur l'actualisation? Avez-vous éventuellement élargir cette pour utiliser le stockage de session?
Oui, j'ai fait des expériences avec le stockage de session pour garder une trace de l'utilisateur authentifié. Je suis tombé sur github.com/grevory/angular-local-storage

InformationsquelleAutor Karl Campbell | 2013-03-13

angularjs

54

Mise à jour: eh bien, vous apprenez quelque chose de nouveau chaque jour... il suffit de retirer le () de regarder les résultats d'une fonction:
```
$scope.$watch(Auth.isAuthenticated, function() { ... });
```
Mis à jour le violon

Dans ce violon, remarquez comment 'watch1" et "watch3" à la fois déclencher une deuxième fois lorsque la valeur de $scope.isAuthenticated changements.

Donc, c'est la technique générale de regarder pour un changement de primitive valeur est définie sur un service:
- définir une API/méthode qui retourne (la valeur de) la primitive
- $montre que la méthode
À surveiller les modifications apportées à un objet ou un tableau qui est définie sur un service:
- définir une API/méthode qui retourne (une référence à l'objet/tableau
- Dans le service, attention à ne modifier l'objet ou le tableau, ne pas réaffecter.
  E. g., ne pas faire ceci: user = ...;
  Plutôt faire ceci: angular.copy(newInfo, user) ou ceci: user.email = ...
- normalement, vous allez attribuer un local $champ d'application de la propriété le résultat de cette méthode, d'où le $scope propriété sera une référence à l'objet/tableau
- $montre l'étendue de la propriété
Exemple:
```
$scope.user = Auth.getUser();
//Because user is a reference to an object, if you change the object
//in the service (i.e., you do not reassign it), $scope.user will
//likewise change.
$scope.$watch('user', function(newValue) { ... }, true);
//Above, the 3rd parameter to $watch is set to 'true' to compare
//equality rather than reference.  If you are using Angular 1.2+
//use $watchCollection() instead:
$scope.$watchCollection('user', function(newValue) { ... });
```
Réponse originale à cette question:

De regarder les résultats d'une fonction, vous devez passer $regarder une fonction qui encapsule cette fonction:
```
$scope.$watch( function() { return Auth.isAuthenticated() }, function() { ... });
```
Violon. En coulisse, remarquez comment seulement "watch3' déclenche une deuxième fois lorsque la valeur de $scope.isAuthenticated changements. (Ils déclenchent d'abord, dans le cadre de dollars de regarder l'initialisation.)
- Oui, cela fonctionne parfaitement. Merci pour l'explication et le violon, trop, qui fait sens. Merci pour votre aide!
- MERCI!!!!! @Mark Rajcok
- Merci, ta solution a fait ma journée 😀
- Fantastique et d'explication. +1
- brillamment expliqué, merci @MarkRajcok
- Il est important de mentionner que la mise à jour de votre solution peut être non optimal lorsque vous avez besoin de regarder pour des changements sur de grandes collections. Dans ce cas, à l'aide de votre approche originale peut être préféré.
- Pas sûr que je reçois cette réponse. Je reçois un problème similaire et j'ai juste une simple barre de navigation item: <p class="navbar-texte">Utilisateur: {{userSession.currentUserEmail}}</p> - il ne pas actualiser tout comme l'original de l'affiche de la situation. Puis-je éviter l'appel d'une fonction? Que serais-je appeler?
- 1. À l'aide angulaire.copier() à la place de la réaffectation de tableau. 2. Réglage de la troisième paramètre de $regarder comme vrai. Mon problème est résolu! Je vous remercie pour sauver ma vie, +1
InformationsquelleAutor Mark Rajcok
0

Essayer de changer

$scope.$regarder(Auth.isAuthenticated(),function () {
$champ d'application.utilisateur = Auth.getUser()
})

à

$scope.$regarder(Auth.isAuthenticated(),function () {
$champ d'application.utilisateur = Auth.getUser()
}, true)

Regarder la AungularJs $regarder la documentation pour une explication détaillée, la valeur par défaut est false, ce qui signifie que Angulaires détecte les changements dans la première des valeurs de paramètre par référence, en passant true signifie que la vérification est effectuée par l'égalité. Étant le paramètre d'une fonction, la vérification renvoie toujours faux, puisque la référence à la fonction est toujours la même.
- Je ne pense pas que cela va fonctionner: violon -- dans les deux cas, la référence à la fonction est renvoyé, ce qui ne change pas. En coulisse, les montres de déclencher une seule fois (pour initialiser eux-mêmes).
InformationsquelleAutor remigio
0

À l'aide de user que votre nom de variable est généralement pas une bonne idée. - Je une fois que je l'ai changé ti currentUser tout a fonctionné pour moi.

InformationsquelleAutor BRogers

Vous devez vous connecter pour publier un commentaire.