Question

我对AngularJS和编程都很陌生，所以对你来说这很容易就是问题，但是我在这个问题上挣扎了好几个小时并且无法直接思考。

所以，我的目标很简单，要在我的应用程序（网页）上登录facebook，我使用Ciul angular-facebook module，这实际上有效，但不是我想要的方式。当用户登录时，我想显示他的名字和照片，但现在我必须手动重新加载页面，然后显示，直到那时它不会。此外，我将已登录的用户存储到localStorage（工作正常）。

问题是登录后数据没有更新。在我的html代码中，我试图从控制器或服务中调用它们，但两者都有旧数据，而且我不知道如何在不重新加载页面的情况下更新它。最有趣的部分是当我尝试使用简单的变量时，它就像一个魅力。

这是我的服务

app.factory('mainService', ['$window', '$location', '$route', '$filter', 'Facebook', function (win, $location, $route, $filter, Facebook) {

    var scope = {
        fbLogin: false,
        fbUid: 0,
        fbAccessToken: 0,
        vkLogin: false
    };

    var user = {};
    if(localStorage.getItem('user') != null) {
        user = JSON.parse(localStorage.getItem('user'));
    } else {
        user = null;
    }

    return {
        scope : scope,
        user : user,
        fbLogin : function () {
            Facebook.login(function (response) {
                scope.fbLogin = response.status;
                scope.fbAccessToken = response.authResponse.accessToken;
                scope.Uid = response.authResponse.userID;

                Facebook.api('/me?fields=id,name,email,picture', function (response) {
                    localStorage.setItem('user', JSON.stringify(response));
                });

            });   
            console.log('setting user');
                user = JSON.parse(localStorage.getItem('user'));
        },
        fbLogout : function () {
            Facebook.logout(function (response) {

            });
            user = null;
            localStorage.removeItem('user');
        },
        removeAuth : function () {
            Facebook.api({
                method: 'Auth.revokeAuthorization'
            }, function (response) {
                Facebook.getLoginStatus(function (response) {
                    scope.fbLogin = response.status;
                });
            });
        }
    };


}]);

这是我的控制器

app.controller('IndexController', ['$scope', '$location', '$http', 'mainService', function ($scope, $location, $http, mainService) {

$scope.ms = mainService;

$scope.user = mainService.user;

$http({ 
    method: 'GET',
    url: 'backend/api/v1/getItems.php',
    headers: { "Content-Type": 'text/json; charset="utf-8"' }
})
    .success(function(data, status) {
        //alert("status is : "+status);
        if(status === 200) {
            $scope.items = data;
        }
    })
    .error(function(data, status) {
        $scope.items = [];
    });

}]);

调用登录功能＆lt; li＆gt; a href =＆＃34;＃/＆＃34; ng-click =＆＃34; ms.fbLogin（）＆＃34;＆gt;使用Facebook登录

以html {{user.name}}或{{ms.user.name}}

调用数据

嗯，同样的问题也是退出。

Answer 1

嘿，所以我很难说这是确切的问题，但从它的外观到目前为止你所拥有的一切实际上都很不错。

我发现只有一个问题，它只是归结为理解对象通过引用绑定到变量。如果你不确定这意味着什么，我会说首先做一些研究，因为它是javascript的基本部分。

这里的问题似乎是您将'user'设置为服务中的空对象。在您的控制器中，您将$ scope.user分配给同一个对象为空。

但是，在登录功能中，您要将用户分配给存储中的新JSON。首先，在设置localstorage之后，这也应该在成功回调中。

我不熟悉那个模块，但我会假设那些是异步函数。因此，您甚至在设置之前就会抓取本地存储数据。

此外，通过将“user”设置为新对象，您已在服务中更新了它的值，但控制器中的不是。

因为它受引用约束，服务中的“user”现在指向 new 对象，而$ scope.user仍然指向原始空对象。

要解决此问题，您可以做两件事：

以不同方式处理回调，以便将$ scope.user重新分配给新数据。

或者你可以采用优势的对象引用。

您可以保留大部分代码，但在服务中，不是将数据分配给“用户”，而是将其分配给用户上的属性。

Facebook.api('/me?fields=id,name,email,picture', function (response) { localStorage.setItem('user', JSON.stringify(response)); user.data = response; });

由于服务和控制器都引用了相同的对象，因此您可以访问$ scope.user上的新数据属性。

<强> HTML：

<span>{{user.data.name}}</span>

来自服务的数据未更新

1 个答案: