javascript - AngularJS - 共享服务对象被错误删除

Question

当我第二次触发 deleteQuestion() 时，2 个问题被删除。任何想法？如果您需要查看我的更多代码，请告诉我。

controller.js

crtPromoCtrl.controller('surveyCtrl', ['$scope', 'surveySrv', function($scope, surveySrv)
{
    $scope.questions = surveySrv.getQuestions();

    $scope.editQuestion = function(index)
    {
        surveySrv.setEditQuestion(index);
    };

    $scope.deleteQuestion = function(index)
    {
        $(document).off('click', '#confirmationModal #confirm');
        $('#confirmationModal').modal('show');

        $(document).on('click', '#confirmationModal #confirm', function()
        {
            surveySrv.deleteQuestion(index);

            $scope.$apply();
        });
    };
}]);

service.js

crtPromoSrv.service('surveySrv', function()
{
    var questions = [];
    var editQuestion;

    this.getQuestions = function()
    {
        return questions;
    };

    this.addQuestion = function(question)
    {
        questions.push(question);
    };

    this.setEditQuestion = function(index)
    {
        editQuestion = questions[index];
    };

    this.getEditQuestion = function()
    {
        return editQuestion;
    };

    this.clearEditQuestion = function()
    {
        editQuestion = undefined;
    };

    this.deleteQuestion = function(index)
    {
        questions.splice(index, 1);
        console.log(questions);
    };
});

编辑:我认为这是一个事件传播的事情，因为当我有 5 个 q 时，当我删除 #2 时，它会删除 #2 和 #3。

编辑:已修复，请参阅controller.js代码。

Answer 1

您似乎多次向 #confirmationModal #confirm 按钮添加 'click' 函数。第一次调用 $scope.deleteQuestion 时，它会添加该函数。第二次调用它时，它会再次添加它，因此当单击它时，该函数会被调用两次。

一个简单的修复方法是在再次添加'click' 事件之前取消绑定(bind)它。像这样的东西: $('#confirmationModal #confirm').off('click');

这里更好的解决方案是根本不对这些事件绑定(bind)使用 jQuery。使用简单的 Angular 模态指令(例如 Angular-UI 库中提供的指令)将是执行此操作的正确方法。然后您只需在按钮上进行 ng-click 就不会出现此问题。