AngularJs 2承诺在手表内第二个永远不会起作用

时间:2013-02-28 20:10:49

标签: ajax angularjs promise

我的应用程序中有2个列表,用户应该将项目从一个列表拖放到另一个列表 当用户将一个元素从一个列表中删除到另一个列表时,必须向服务器端代码发出请求以更新数据库中的字段(SelectedForDiscussion)。 这是我的控制器中的代码:

$scope.$watch("questionsDiscuss", function (value) {
    var question = $.Enumerable.From($scope.questionsDiscuss).Where(function (item) { return !item.SelectedForDiscussion }).FirstOrDefault()
    if (question != undefined) {

        questionSelectionService.UpdateQuestionSelectionStatus(question.Id, true)
        .then(function (output) {

            var question = $.Enumerable.From($scope.questionsDiscuss)
                                .Where(function (item) { return item.Id == output.data.questionId })
                                .FirstOrDefault();
            var index = $.Enumerable.From($scope.questionsDiscuss).IndexOf(question);

            if (question != undefined)
                if (output.data.result != "success") {
                    $scope.questionsDiscuss.splice(index, 1);
                    $scope.questionsReceived.splice(0, 0, question);
                }
                else {
                    question.SelectedForDiscussion = true;
                    $scope.questionsDiscuss[index] = question;
                }
        });
    }
    else {
        var question = $.Enumerable.From($scope.questionsReceived).Where(function (item) { return item.SelectedForDiscussion }).FirstOrDefault();
        if (question != undefined) {
            questionSelectionService.UpdateQuestionSelectionStatus(question.Id, false)
            .then(function (output) {
                var question = $.Enumerable.From($scope.questionsReceived)
                                .Where(function (item) { return item.Id == output.data.questionId })
                                .FirstOrDefault();
                var index = $.Enumerable.From($scope.questionsReceived).IndexOf(question);

                if (question != undefined)
                    if (output.data.result != "success") {
                        $scope.questionsReceived.splice(index, 1);
                        $scope.questionsDiscuss.splice(0, 0, question);
                    }
                    else {
                        question.SelectedForDiscussion = false;
                        $scope.questionsReceived[index] = question;
                    }
            });
        }

    }

}, true);

我在Firebug中的以下行中放置了4个javascript断点:
其中2个在以下几行:

if (question != undefined) {

一个在:

var question = $.Enumerable.From($scope.questionsDiscuss)
    .Where(function (item) { 
        return item.Id == output.data.questionId 
     }) 
    .FirstOrDefault();

另一个在:

var question = $.Enumerable.From($scope.questionsReceived)
    .Where(function (item) { 
         return item.Id == output.data.questionId 
     })
    .FirstOrDefault();

发生以下情况:

断点位于:

if (question != undefined) {
总是达到

处的断点
var question = $.Enumerable.From($scope.questionsDiscuss) 
    .Where(function (item) { 
         return item.Id == output.data.questionId 
    })
    .FirstOrDefault();

也到了。
另一个从未到达。
两个响应都没问题(响应代码200) 一切都应该完美,但第二个承诺中的第二个条款永远不会达到 谁能告诉我我做错了什么? 服务器端应用程序是一个用C#编写的ASP.NET MVC应用程序。

编辑1: 我弄清楚为什么会这样,我有一个解决方法。我对实际解决方案感兴趣 问题是angularjs抛出一个错误,然后在第二次调用$ http时吞下它。错误是:

  

消化正在进行中的

我认为这是因为在我的指令中我有这段代码:

dndfunc = function (scope, element, attrs) {

    // contains the args for this component
    var args = attrs.dndBetweenList.split(',');
    // contains the args for the target
    var targetArgs = $('#' + args[1]).attr('dnd-between-list').split(',');

    // variables used for dnd
    var toUpdate;
    var target;
    var startIndex = -1;

    // watch the model, so we always know what element
    // is at a specific position
    scope.$watch(args[0], function (value) {
        toUpdate = value;
    }, true);

    // also watch for changes in the target list
    scope.$watch(targetArgs[0], function (value) {
        target = value;
    }, true);

    // use jquery to make the element sortable (dnd). This is called
    // when the element is rendered
    $(element[0]).sortable({
        items: 'div',
        start: function (event, ui) {
            // on start we define where the item is dragged from
            startIndex = ($(ui.item).index());
        },
        stop: function (event, ui) {
            var newParent = ui.item[0].parentNode.id;

            // on stop we determine the new index of the
            // item and store it there
            var newIndex = ($(ui.item).index());
            var toMove = toUpdate[startIndex];

            // we need to remove him from the configured model
            toUpdate.splice(startIndex, 1);

            if (newParent == args[1]) {
                // and add it to the linked list
                target.splice(newIndex, 0, toMove);
            } else {
                toUpdate.splice(newIndex, 0, toMove);
            }

            // we move items in the array, if we want
            // to trigger an update in angular use $apply()
            // since we're outside angulars lifecycle
            scope.$apply(targetArgs[0]);
            scope.$apply(args[0]);
        },
        connectWith: '#' + args[1]
    })
}

最后有2个电话适用,我认为会引发一个新的摘要周期 无论如何,我通过在应用调用之前添加此调用来修复它:

            if (scope.updateLists != undefined)
                scope.updateLists();

并将手表中的所有代码移动到updateLists函数中。

另外因为人们提到服务与它有关,我在其中粘贴相关代码:

GetQuestionsReceived: function (eid, criteria, page, rows) {

    var promise = this.GetQuestionsReceivedInternal(eid,criteria, page, rows).then(function (response) {
        // The return value gets picked up by the then in the controller.
        return response;
    });
    // Return the promise to the controller
    return promise;
},

GetQuestionsReceivedInternal: function (eid, criteria, page, rows) {

    return $http({ method: 'GET',
        url: '../QuestionManagement/GetQuestions?eventId='+eid+'&page=1&rows=5&'+serialize(criteria)
    }).
      success(function (data, status, headers, config) {
          // this callback will be called asynchronously
          // when the response is available
          results = data;
      }).
      error(function (data, status, headers, config) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
          if (window.console && console.log) {
              console.log("Could not obtain questions received. Error:" + data + "Status:" + status + "Headers:" + headers + "Config:" + config);
          }
      });
},

  GetQuestionsDiscuss: function (eid,criteria, page, rows) {

    var promise = this.GetQuestionsDiscussInternal(eid,criteria, page, rows).then(function (response) {
        // The return value gets picked up by the then in the controller.
        return response;
    });
    // Return the promise to the controller
    return promise;
},

GetQuestionsDiscussInternal: function (eid,criteria, page, rows) {

    return $http({ method: 'GET',
        url: '../QuestionManagement/GetQuestions?eventId=' + eid + '&page=1&rows=5&' + serialize(criteria)
    }).
      success(function (data, status, headers, config) {
          // this callback will be called asynchronously
          // when the response is available
          response = data;
      }).
      error(function (data, status, headers, config) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
          if (window.console && console.log) {
              console.log("Could not obtain questions received. Error:" + data + "Status:" + status + "Headers:" + headers + "Config:" + config);
          }
      });

},

1 个答案:

答案 0 :(得分:0)

你有两个非常相似的代码块,它们可以通用化并放在一个函数包装器中,留下一个非常简单的调用函数。

如果您可以将所有内容都放入该表单中,那么我认为您会发现调试更容易。

尝试这样做:

function updateSelectionStatus(qA, qB, bool) {
    var en = $.Enumerable.From(qA);
    var question = en.Where(function (item) {
        return bool ? !item.SelectedForDiscussion : item.SelectedForDiscussion;
    }).FirstOrDefault();
    if(question) {
        questionSelectionService.UpdateQuestionSelectionStatus(question.Id, bool).then(function (output) {
            if (output.data.result == "success") {
                question.SelectedForDiscussion = bool;
            }
            else {
                qA.splice(en.IndexOf(question), 1);
                qB.unshift(question);
            }
        });
    }
    return question;
}

$scope.$watch("questionsDiscuss", function (value) {
    if (!updateSelectionStatus($scope.questionsDiscuss, $scope.questionsReceived, true) {
        updateSelectionStatus($scope.questionsReceived, $scope.questionsDiscuss, false);
    }
}, true);

我可能做了一些错误的假设并且简化了太多(例如,清除内部$.Enumerable.From,这似乎重新选择了与外部相同的问题),因此您可能需要重新编写我的代码。

我在这里提倡一个原则,而不是提供解决方案。