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为空。使用服务在控制器之间共享数据的全部目的不是？由于我已在userData中设置了Controller 1的值，因此我无法在Controller 2中访问它吗？

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

编辑：

模板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;
});

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

1 个答案: