Question

我的控制器中有以下功能：

$scope.model.listApplicantStatuses = function(){
    var statusChoices = jobsService.getApplicantStatuses();

    if(statusChoices !== null)
            return statusChoices;

    //if($scope.model.listApplicantStatuses.inProgress)
    //  return;
    //$scope.model.listApplicantStatuses.inProgress = true;
    jobsService.fetchApplicantStatuses().then(function(data){
        jobsService.setApplicantStatuses(data.data);
        return data.data;
    },
    function(data){
        $scope.layout.showNotification('error', 10 * 1000, 'we are is experiencing technical difficulties <a href="mailto:support@" class="btn btn-danger">Contact Support</a>');
    });
}

相应的服务代码：

jobsServ.fetchApplicantStatuses = function(){
    return $http.get(utils.getBaseUrl() + '/applications/status_choices', utils.getConfig());
}
jobsServ.getApplicantStatuses = function(){
    return that.applicantStatusChoices;
},
jobsServ.setApplicantStatuses = function(choices){
    that.applicantStatusChoices = choices;
},

DOM使用示例：

<select class="statusSelect" data-ng-model="model.editedApplicant[applicant.id].status" data-ng-show="layout.statusVisible(applicant.id) && !layout.statusLoader[applicant.id]" data-ng-options="key as val for (key, val) in model.listApplicantStatuses()" data-ng-change="model.updateStatus(applicant.id)"></select>

现在，我遇到的问题是，虽然chrome等待第一个函数调用完成，然后给我从AJAX调用中得到的数据，并且同时返回undefined，Firefox调用函数结束再一次，创造了大量不必要的XHR请求。

我注释掉了设置inProgress $ scope变量的代码，因为它对我来说似乎很多jQurish解决方案，因为这会迫使我在很多地方更改我的代码，并创建另一个布尔标志，如每个对服务器的请求都是这样的。

Answer 1

我希望Firefox的行为。也许您应该将逻辑更改为：

// a variable to keep statuses, or a promise
$scope.applicantStatusList = $scope.model.listApplicantStatuses();

更改listApplicantStatuses()以返回承诺：

$scope.model.listApplicantStatuses = function() {
    var statusChoices = jobsService.getApplicantStatuses();

    if(statusChoices !== null)
        return statusChoices;

    return jobsService.fetchApplicantStatuses().then(function(data){
        jobsService.setApplicantStatuses(data.data);
        return data.data;
    },
    function(data){
        $scope.layout.showNotification(...);
    });
};

并使用applicantStatusList中的<select>：

<select ... data-ng-options="key as val for (key, val) in applicantStatusList" ...></select>

Answer 2

我通过在发送xhr的函数中分配名为_root的局部变量，在发送请求时将_root.ingProgress设置为true，并在收到答案后将其切换为false来解决此问题。

像魅力一样。

代码：

$scope.model.listApplicantStatuses = function(){
    var statusChoices = jobsService.getApplicantStatuses();

    if(statusChoices !== null)
            return statusChoices;
    var _root = this;
    if(_root.inProgress)
        return;

    _root.inProgress = true;
    jobsService.fetchApplicantStatuses().then(function(data){
        jobsService.setApplicantStatuses(data.data);
        _root.inProgress = false;
        return data.data;
    },
    function(data){
        _root.inProgress = false;
        $scope.layout.showNotification('error', 10 * 1000, 'We are currently experiencing technical difficulties <a href="mailto:support@" class="btn btn-danger">Contact Support</a>');
    });
}

Firefox将控制器功能绑定到DOM时发送多个XHR请求

2 个答案: