服务变量控制器不更新 [英] Service variable not updating in controller

问题描述

我有一个NavbarCtrl是NG-视图外。我有一个登录控制器，会谈到一个服务来获取登录的用户。一旦用户登录，我想要的导航栏与用户的电子邮件地址进行更新。然而，对于我的生活，我似乎无法获得导航栏的范围与装载在我的验证服务，一旦用户登录的数据进行更新。

I have a NavbarCtrl that is outside of ng-view. I have a login controller that talks to a service to get a user logged in. Once the user is logged in, I want the Navbar to update with the user's email address. However for the life of me, I can't seem to get the Navbar scope to update with the data that is loaded in to my "Auth" service once the user is logged in.

这是我的主要的index.html：

This is my main 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:'[e-mail]'}
            authenticated = true;
            callback(true);
            //actual code for logging in taken out for brevity
        }
    }
})

和我的登录和导航栏控制器：

And my Login and Navbar controllers:

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（）;会的工作，但它不是和我在一个完全不知如何如何，当用户登录我能得到我的导航栏更新。感谢您事先的任何帮助。

From my research I would have thought that $scope.user = Auth.getUser(); would work, but it's not and I'm at a complete loss as to how how I can get my Navbar updated when a user is logged in. Thanks in advance for any help.

推荐答案

更新：那么，你每天学习新的东西...只是删除（）来观看函数的结果：

Update: well, you learn something new every day... just remove the () to watch the results of a function:

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

<大骨节病> 更新小提琴

在此琴，请注意监视1和watch3都引发了第二次当 $ scope.isAuthenticated 的值更改。

In this fiddle, notice how 'watch1' and 'watch3' both trigger a second time when the value of $scope.isAuthenticated changes.

所以，这是一般的技术的监视更改到的是服务上定义的原始的值

So, this is the general technique to watch for changes to a primitive value that is defined on a service:

• 定义的API /方法，它返回（的值）原始


• $看这个方法

要监视更改到的对象或数组的就是在服务中定义

To watch for changes to an object or array that is defined on a service:

• 定义的API /方法，返回（一个引用）对象/数组


• 在服务，要小心，只修改的对象/数组，不重新分配其结果例如，不这样做：用户= ...; 结果相反，这样做： angular.copy（newInfo，用户）或本 user.email = ...


• 通常你会分配一个本地$ scope属性的方法的结果，因此$ scope属性将是实际的对象/数组
参考

• $看scope属性

• define an API/method that returns (a reference to) the object/array
• In the service, be careful to only modify the object/array, don't reassign it.
  E.g., don't do this: user = ...;
  Rather, do this: angular.copy(newInfo, user) or this: user.email = ...
• normally you'll assign a local $scope property the result of that method, hence the $scope property will be a reference to the actual object/array
• $watch the scope property

例如：

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

---

原来的答复：

---

Original answer:

要观看功能的结果，你需要通过$看它包装了函数的函数：

To watch the results of a function, you need to pass $watch a function that wraps that function:

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

小提琴。在小提琴，只注意到watch3如何触发第二次当 $ scope.isAuthenticated 的值更改。 （他们都触发最初为$一部分观看初始化。）

Fiddle. In the fiddle, notice how only 'watch3' triggers a second time when the value of $scope.isAuthenticated changes. (They all trigger initially, as part of $watch initialization.)

这篇关于服务变量控制器不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！