Question

我在Angular应用程序中使用Restangular来管理对RESTful后端的访问。下面的电话会在我的后端获得所有结果。

Restangular.all('results').getList().then(function(results) {
   $scope.results = results;
});

我已经使用extendModel（）函数将原型函数添加到我的一些后端模型中，所以在我的结果返回给我之前，他们会运行这个函数。

Restangular.extendModel('results', function(model) {
                var result = new Result(model);               
                return result;
            });

我的结果工厂看起来像这样

angular.module('RankingsApp')
    .factory('Result', function(Extender, Restangular, $rootScope) {

        function Result(model) {                
            angular.extend(this, model);
             Restangular.one('fencers', this.links.fencer).get().then(function(response) {
                this.fencer = response;
            });
        };

        Result.prototype.Fencer = function() {
            return this.fencer;
        };       

        return Result;
    });

我添加到结果中的一个功能是返回与结果关联的Fencer。但是，当我从Results构造函数中进行异步调用时，似乎设置了值。我的假设是，这是因为呼叫的异步性质，但我目前对于如何实际修复它感到茫然。

在我的UI中使用Fencer功能来显示一些其他信息

<tr ng-repeat='result in results'>                    
    <td>{{result.Fencer().name}}</td>                   
</tr>

Answer 1

如果您的用户界面依赖于数据，我会在您的模块的解析配置中使用deferred promise来获取用户有条件地处理数据，即成功或失败。

延期承诺的简单示例：

function config($stateProvider) {
    $stateProvider

    .state('fencer', {
        url: '/fencer/result',
        controller: 'FencerCtrl',
        resolve: {
            resultService: function getFencerResult($q, dataservice, sessionService) {
                var deferred = $q.defer();
                var myData = {};
                myData = dataservice.getFormDefaults();
                deferred.resolve(myData);
                return deferred.promise;
            }
        }
    });
}

更新了控制器代码：

Restangular.all('results').getList().then(function(results) {

   $scope.apply( function(){
        $scope.results = results;
    });
});

等待控制器从资源更新

Font Awesome用于旋转图标

<tr ng-repeat='result in results'>                    
    <td ng-show="results.length < 1"> <i class="fa fa-spinner fa-pulse"></i> Loading</td>
    <td ng-show="results.length>0">{{result.Fencer().name}}</td>                   
</tr>

Answer 2

所以我终于找到了一种方法让它发挥作用。在我的原始构造函数中，我设置了fencer

function Result(model) {                
            angular.extend(this, model);
             Restangular.one('fencers', this.links.fencer).get().then(function(response) {
                this.fencer = response;
            });
        };

为了解决这个问题，我需要创建一个setter函数，它附加到我已经存在的Fencer（）。

Result.prototype.Fencer = function(fencer) {
    if(fencer)
    {
        this.fencer = fencer;
    }
    return this.fencer;
};

在工厂构造函数中解析Restangular.get

2 个答案: