服务变量未在控制器中更新

Question

我有一个在ng-view之外的NavbarCtrl.我有一个登录控制器,它与服务进行通信以使用户登录.一旦用户登录,我希望Navbar使用用户的电子邮件地址进行更新.但是对于我的生活,一旦用户登录,我似乎无法使用加载到我的"Auth"服务中的数据来更新Navbar范围.

这是我的主要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>

我的服务:

.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@email.com'}
            authenticated = true;
            callback(true);
            //actual code for logging in taken out for brevity
        }
    }
})

我的Login和Navbar控制器:

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()
}
}

从我的研究中我会想到$ scope.user = Auth.getUser(); 会工作,但它不是,我完全失去了如何在用户登录时更新我的​​Navbar.提前感谢任何帮助.

Answer 1

更新:嗯,你每天都学到新的东西......只需删除()以观察功能的结果:

$scope.$watch(Auth.isAuthenticated, function() { ... });

Updated fiddle

在这个小提琴中,请注意'watch1'和'watch3'如何在$scope.isAuthenticated更改值时触发第二次.

因此,这是监视服务上定义的原始值更改的一般技术:

• 定义返回基元(的值)的API /方法
• $看那个方法

要监视对服务上定义的对象或数组的更改,请执行以下操作:

• 定义返回(引用)对象/数组的API /方法
• 在服务中,注意只修改对象/数组,不要重新分配它.
  例如,不要这样做:user = ...;
  相反,这样做: angular.copy(newInfo, user)或者:user.email = ...
• 通常你会为本地$ scope属性分配该方法的结果,因此$ scope属性将是对实际对象/数组的引用
• $观看范围属性

例:

$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) { ... });

原始答案:

要观察函数的结果,您需要传递$ watch一个包含该函数的函数:

$scope.$watch( function() { return Auth.isAuthenticated() }, function() { ... });

小提琴.在小提琴中,注意只有'watch3'在$scope.isAuthenticated变化的价值时才会触发第二次.(它们都是最初触发的,作为$ watch初始化的一部分.)