角服務和看一個變量

Question

我有一個角度服務，從一個工廠做REST調用得到一個$http承諾，工作正常：

var UserService = function($cookies, DataFactory, jsonHelper, $q) { 
    var USER_KEY = 'user'; 
    var USERNAME_KEY = 'username'; 

    var svcData = { 
     u: null, 
     b: null, 
    } 

    var service = { 
     setUser : function(user){ 
      svcData.u = user; 
      $cookies.put(USER_KEY, user.id); 
     }, 
     getUser : function(){ 
      if(svcData.u === null){ 
       DataFactory.getPrincipalName().then(function(adata){ 
        DataFactory.getBDUser(adata.data.username).then(function(data){ 
         var reg = {}; 
         jsonHelper.setupRegistry(data.data, 
               reg); 
         jsonHelper.resolveReferences(
          data.data, reg, 5); 
      console.log("Request is back"); 
         svcData.u = data.data; 
        }); 
       }); 
      } 
      return svcData.u; 
     } 
... snipped ... 

在我的控制，我做的：

$scope.$watch($scope.user, function(newUser){ 
    console.log($scope.user); 
    console.log("USER HERE"); 
    doSomeStuff(); 
}); 
$scope.user = UserService.getUser(); 

問題是，當我第一次分配$scope.user（它爲空）時，手錶被觸發，然後我得到控制檯消息「請求回來」，但手錶功能不會再次觸發。

爲什麼，我該怎麼做？

Answer 1

1. 通行證字符串$watch()

   $scope.$watch('user', ... 
   

2. 打破功能時newUser是無效的（空/未定義）

   if (!newUser){ 
       return; 
   } 
   

3. 使用承諾

   轉換getUser()函數返回promise。

   例如，https://plnkr.co/edit/nzq9O0JMTxn1k7FL9We5

   app.service('UserService', function($http, $q, $timeout) { 
   
       var cachedUser = null; 
   
       return { 
       getUser: getUser 
       } 
   
       function getUser() { 
       var def = $q.defer(); 
   
       if (cachedUser) { 
        def.resolve(cachedUser) 
       } else { 
   
        // get user from cache. using timeout to simulate http response taking 2.5 seconds 
   
        $timeout(function() { 
   
        cachedUser = { 
         name: 'Mr User' 
        }; 
   
        def.resolve(cachedUser); 
   
        }, 2500); 
       } 
   
       return def.promise; 
       } 
   }); 
   

---

例如：

$scope.$watch('user', function(newUser) { 

    if (!newUser){ 
    return; 
    } 

    doSomeStuff(); 
}); 

UserService.getUser() 
    .then(function(user){ 
     $scope.user = user 
    });