从异步调用中获取一个对象

时间:2014-01-25 14:33:43

标签: javascript angularjs angularjs-service angularjs-controller

我的目标是 显示需要在网页上操作的用户名。应该在服务(MasterDataService)中集中完成mnaipulation。我想在屏幕上使用一个范围变量,它在控制器中定义。控制器正在调用集中服务。该服务正在调用另一个正在调用后端的服务,处理用户名并将结果返回给控制器。结果应该只是JSON对象而不是已解析的请求(延迟和保证)。

网页 - >页面控制器 - >集中服务 - >用户服务 - >和回来的路

我这样做

网页

<div id="usercontainer" ng-show="currentUser" class="ng-hide">
    Hallo, {{currentUser.currentUserName}}.<br />
    (<a href="#/logout">Abmelden</a>)
</div>

控制器

$scope.getCurrentUser = function () {

    $scope.currentUser = MasterDataService.getCurrentUser();
    $log.debug($scope.currentUser); // <-- this is empty afterwards (undefined)
}

MasterDataService

    getCurrentUser: function () {

                    var promise = UserService.getCurrentUser();
                    promise.then(function (resolvedResponse) {
                        $log.debug("MasterDataService.getCurrentUser.start");
                        var currentUser = resolvedResponse.data; 

                        var userLabel = currentUser.Email;
                        if (currentUser.Salutation && (currentUser.LastName !== "" && currentUser.LastName !== undefined && currentUser.LastName !== null)) {
                            userLabel = currentUser.Salutation.Name + " " + currentUser.LastName;
                            if (currentUser.Title) {
                                userLabel = currentUser.Salutation.Name + " " + currentUser.Title.Name + " " + currentUser.LastName;
                            }
                        }
                        currentUser.currentUserName = userLabel;
                        return currentUser;

                    }, function (resolvedResponse) {
                        $log.debug("MasterDataService.getCurrentUser.error");
                    }, function (resolvedResponse) {
                        $log.debug("MasterDataService.getCurrentUser.notification");
                    });
                }

UserService

        getCurrentUser: function (optionsData) {
            $log.debug("UserService.getCurrentUser.start");

            var promise = $http({
                method: 'GET',
                url: '/api/User'
            }).then(function (response) {

                var deferred = $q.defer();
                $log.debug("UserService.changeOptions.success.status: " + response.status);
                if (response.status == 200) {
                    deferred.resolve(response);
                    return deferred.promise;
                }
                deferred.reject('OptionsNotChanged');
                return deferred.promise;

            }, function (response) {
                $log.debug("UserService.changeOptions.error.status: " + response.status);
                return $q.reject('OptionsNotChanged');
            });
            return promise;
        },

someboddy可以告诉我为什么我的控制器中的对象之后是空的,以及我如何实现从MasterDataService获取被操纵的对象? 我是否必须以承诺和推迟做到这一点?如果是这样,我怎样才能在返回之前操纵服务中的用户对象?

提前致谢 的Sascha

1 个答案:

答案 0 :(得分:1)

听起来你想要这样的东西:(基本上是$ resource)

angular.module('myApp',[])    
.factory('MasterDataService',function($http){
    var currentUser = {};
    return {
         getCurrentUser: function(any,param,you,need){
            currentUser.$promise = $http({...}).then(function(response){
                var mainpulateUser = response.data;
                //do business logic, 
                return angular.extend(currentUser,manipulatedUser);                   
            });
            return currentUser;
         }
    };     
})
.controller('myCtrl',function(MasterDataService,$scope,$log){
    $scope.buttonTitle = 'UpdateUser';
    $scope.user = MasterDataService.getCurrentUser();
    $scope.user.$promise.then(function(user){
       $log.debug($scope.user === user);
       $log.debug('current user -> ',$scope.user);
    });
    $scope.getCurrentUser = function(){
        MasterDataService.getCurrentUser();
    }
});

这是plunker。 (我使用$timeout模拟$http)关键是保持对当前用户的一个引用。

这就是MasterService.getCurrentUser();实际更新用户的原因。它只是var currentUser = {}。该引用永远不会被删除。因此$scope.user === currentUser

理想情况下,您不希望在数据检索服务或控制器中执行业务逻辑。但是你的模型。要定义模型,您可能会执行类似......

的操作
angular.factory('User',function(){
    var User = function(initWith){
        initWith = initWith || {};
        this.firstName = initWith.firstName || ''
        this.lastName = initWith.lastName || ''
        this.position = 'employee'
        this.lastRetrieved = new Date();  

    }
    User.prototype.doBusinessLogic = function(position){
         this.position = position;
    }
    return User;
}); 

这是一个分叉的plunk