在Angular JS中设置和获取服务中的数据值

Question

所以这是我用来获取用户详细信息的服务。

angular.module('app')
.factory('userDetailService', function($http) {
    var userData = {};

    function getUserDetails(userId) {
        if (userId) {
            return $http.get("/users/" + userId).success(function(data) {
                angular.copy(data[0], userData);
            });
        }
    }
    return {
        userData: userData,
        getUserDetails: getUserDetails
    }
})

现在在使用这项服务的Controller 1中，我有一些代码可以正常工作，因为我得到了相关的数据。

$scope.getUserId = function(userId) {
        if (userId) {
            $scope.userData = userDetailService.userData;
            userDetailService.getUserDetails(userId).success(function() {
                console.log($scope.userData); //Prints valid user data
            });
        }
 };

在Controller 1执行此功能后，我尝试在Controller 2执行以下操作：

$scope.userData = userDetailService.userData;
console.log($scope.userData); //Prints null

但$scope.userData为null。 使用服务在控制器之间共享数据的全部目的不是？ 由于我已经在Controller 1设置了userData的值，我不应该能够在Controller 2访问它吗？

奇怪的是，作为Controller 2模板的模态对话框能够以{{userData.first_name}}或{{userData.last_name}}的形式访问数据。 如果这样$scope.userData ，为什么$scope.userData null？ 我错过了什么？

编辑：

模板1：

<div id="myModal" ng-controller="Controller 1">
<modal-configure-user></modal-configure-user>
    <a data-toggle="modal" data-target="#configureUserModal" href="#" ng-click="getUserId(user.id)" data-id="user.id">{{user.first_name + ' ' +user.last_name}}</a>
</div>

模板2：

<div ng-controller="Controller 2"  id="configureUserModal">
</div>

两者都是模态对话框窗口。

Answer 1

您的方法不是很可靠，因为当您尝试在第二个控制器中访问数据时，您无法100％确定数据已经加载。 而不是将用户数据分配给变量总是调用getUserDetails方法，该方法返回一个promise。 然后，您只需缓存加载的数据以避免重复的请求。

angular.module('app')
.factory('userDetailService', function($q, $http) {

    var userData;

    function getUserDetails(userId) {
        if (userId) {
            return userData ? $q.when(userData) : $http.get("/users/" + userId).success(function(data) {
                userData = data;
                return userData;
            });
        }
    }

    return {
        getUserDetails: getUserDetails
    }
});

将userData包装到$q.when会创建一个promise对象，该对象会立即解析。 这就是您所需要的，因为服务API现在是一致的 - 您始终处理承诺。

然后两个控制器中的用法将是：

userDetailService.getUserDetails(userId).then(function(data) {
    $scope.userData = data;
});