javascript - $scope.watch 不会等到变量改变

Question

我的 Controller 中有这段代码:

$scope.$watch(userService.getUser, function(getUser){
          console.log(getUser);
          var user = getUser;

这在我的服务中:

.service('userService', function ($http, $q, auth, userFactory) {
        var user;

        userFactory.getUser2(auth.currentUser()).getValue(function(result){
            //console.log(result);
            user = result;
        });

        this.getUser = function() {
            //console.log(user);
            return user;
        }

    })

代码有效，但我收到错误，因为我的 Controller 代码是在用户变量更改之前执行的。我可能应该使用 promises，我试过了但没有完全起作用。

这是我在 userFactory 中的 API 调用:

userFactory.getUser2 = function(usr){
      return{
        getValue: function(callback){
          $http({
            method: 'POST',
            url:'http://groep6api.herokuapp.com/user',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'
            //'authentication': 'bearer' + $window.localStorage.getItem('eva-token')
            },
            transformRequest: function(obj) {
              var str = [];
              for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
              return str.join("&");
            },
            data : {username: usr}
          }).success(function (result) {
            //console.log("userfactory getUser:", result[0]);
            callback(result[0]);
          });
        }
      }
    };

仅使用 $scope.watch 是否可行？或者我应该使用 promise ，如果是这样，在这种情况下实现 promise 的正确方法是什么？我用 $q 等尝试了它，但这只会给出其他范围的错误。

Answer 1

您需要添加一个守卫(if)以防止在异步调用完成之前执行其余的 Controller 代码，或者只需将其余的 Controller 代码放入其中$scope.$watch 回调:

$scope.$watch(userService.getUser, function(getUser){
  var user = getUser;

  // do the rest of your stuff
});

或者类似这样的东西:

$scope.user = null;

$scope.$watch(userService.getUser, function(getUser) {
  $scope.user = getUser;
});

if($scope.user) {
  // do the rest of your stuff
}

在第二个示例中，需要使用 $scope.user(或附加到 $scope 的内容)，以便它会触发摘要循环并重新评估您的if 守卫。