使用服务跟踪用户状态并使 $watch(） 正常工作

我是AngularJS的新手，正在努力开发一个依赖于登录用户的NAV的网站。我决定使用状态模型设计，将 Nav 控制器作为每个页面的父状态。 这一切都有效。

app.config(function ($stateProvider, $httpProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('login');
$stateProvider
    .state('admin', {
        templateUrl: 'partials/Nav.html',
        controller: 'NavigationController'
    })
    .state('users', {
        url:'/users',
        templateUrl:'partials/Users.html',
        controller: 'UserController',
        parent: 'admin'
    })
    .state('devices', {
        url:'/devices',
        templateUrl:'partials/Devices.html',
        controller: 'DeviceController',
        parent: 'admin'
    }) ...

但是，我需要跟踪用户的状态，我认为我应该使用服务来执行此操作。所以我有一个服务(UserStatus(，基本上跟踪用户的状态(经过身份验证和用户名(。 其他控制器将这些更改传达给此服务。到目前为止，所有工作都有效。

(function(){
    var app = angular.module('butler-user-status', []);
    app.service( 'UserStatusService', ['$http', function($http) {
        //
        // As a service, the 'this' when the code is called will likely point to other things.
        // To avoid this issue, I save 'this' in a local variable and then the functions can 
        // refer to that variable and it will always be the right one!
        //
        console.log('User Status: Initializing service...');
        var userStatusService = this;
        userStatusService.state = {currentUsername: '', 
                                    authenticated: false};

        $http.get('/currentUser', {})
            .success(function(data, status, headers, config){
                // console.log('currentUser responded with data: '+JSON.stringify(data.username));
                if (data.username != null) {
                    console.log('UserStat: on success name='+data.username);
                    console.log('UserStat: on success authenticated='+true);
                };
            }).error(function(){
                // console.log('currentUser responded with error');
                console.log('UserStat: on error');
                userStatusService.state.currentUsername = '';
                userStatusService.state.authenticated = false;
            });
        this.login =  function(username) {
            console.log('Login: Setting username  and authenticated: username='+username);
            userStatusService.state.currentUsername = username;
            userStatusService.state.authenticated = true;
            console.log('Login: user logged in');
        };
        this.logout = function() { 
            userStatusService.state.authenticated = false; 
            console.log('Login: user logged out');
        };
    }]);
})();

然后，我想让 Nav 控制器跟踪用户状态的变化，因此我在服务中的变量上设置了一个$scope.$watch()，并在服务更改时更新控制器中的变量。 然后，HTML 页面可以通过引用控制器的变量来更改其表示形式。

(function() {
    var app = angular.module('butler-navigation', ['butler-user-status']);
    app.controller('NavigationController', ['$scope', 'UserStatusService', function($scope, UserStatusService) {

        var navigationController = this;
        var isAuthenticated = UserStatusService.state.authenticated;
        var currentUsername = UserStatusService.state.currentUsername;
        console.log('Butler-Nav: at init: username ='+UserStatusService.state.currentUsername);
        console.log('Butler-Nav: at init: auth = '+ UserStatusService.state.authenticated);

        $scope.$watch('UserStatusService.state', function (newValue, oldValue) {
            console.log('Butler-Nav: Updating isAuthenticated to:'+newValue+' from '+oldValue);
            navigationController.isAuthenticated = newValue;
        });

    }]);
})();

出于某种原因，我收到了对$watch侦听器的初始回调，但对于 newValue 和 oldValue 都没有定义。 但是我将服务中的值设置为实际值，而不是空值等。

我做错了什么？ 提前感谢您帮助新手。