服務中的數據沒有更新

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 = []; 
    }); 

}]); 

調用登錄功能< LI> < A HREF = 「＃/」 NG點擊=「ms.fbLogin（ ）「>使用Facebook登錄

以html格式調用數據{{user.name}}或{{ms.user.name}}

那麼，同樣的問題也是退出。

Answer 1

嘿所以我很難說這是確切的問題，但從它的外觀來看，它到目前爲止的一切其實都很不錯。

我發現只有一個問題，它只是歸結爲了解對象通過引用綁定到變量。如果你不確定這意味着什麼，我會說，首先做一些研究，因爲它是JavaScript的基本部分。

這裏似乎存在的問題是您將'用戶'設置爲服務中的空對象。在你的控制器中，然後將$ scope.user分配給同一個對象爲空。

但是，在您的登錄功能中，您正在將用戶分配給存儲中的新JSON。首先，這應該也在成功回調之內，就在您設置localstorage之後。

我不熟悉那個模塊，但我會假設這些是異步函數。因此，您甚至在設置本地存儲數據之前抓取該數據。

此外，通過將「用戶」設置爲新對象，您已更新其服務中的值，但控制器中的而不是。

因爲它是由引用約束，在服務「用戶」現在指向一個新對象，而$ 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>