javascript - 为什么 ng-click 被称为点击按钮的次数？

Question

我正在开发一个 angular-node.js 应用程序，其中有一个按钮，单击该按钮会触发发布请求。我遇到了一个奇怪的问题，即这个发布请求被调用的次数与按钮被点击的次数有关。例如，如果我第一次单击按钮 - 发布请求被调用一次，如果我再次单击那是第二次发布请求执行两次，依此类推。我不知道代码有什么问题，这是我的代码:

angular.js:

$scope.addActivity = function(actor){

    AJS.dialog2("#impact-dialog").show();

    $(".dialog-close-button-impact").click(function(e) {
        //e.preventDefault();
        AJS.dialog2("#impact-dialog").hide();
    });

    var countClicks = 0;
    $(".SubmitImpact").click(function(e) {

        e.preventDefault();


        alert("I am being called again and again");
        countClicks++;
        alert(countClicks);
        AJS.dialog2("#impact-dialog").hide();

        var data = {
            productName: $scope.productName,
            actor: actor,
            activity : $('#activity').val(),
            checked: false
        };

        console.log("Input data for add impact" + actor)

        $http.post('/addActivity', data)
            .success(function(data){
                $scope.data = data;
                $scope.activities = [];

                for (var activity in data) {

                    $scope.activities.push({
                        text: data[activity].activity,
                        id: data[activity].actor,
                        checked: data[activity].checked
                    });
                }
                actor = "";


            }).error(function(data){
                console.log('Error in adding activity' + data)
            });

    });

};

node.js 代码:

app.post('/addActivity',function(req, res) {

    console.log("I am going to add activity");

    console.log("Checked value:" +req.body.checked)

    impactMapActivity.create(
        {productName: req.body.productName,
            checked: req.body.checked,
            actor: req.body.actor,
            activity: req.body.activity

        }, function(err,data){
            if (err)
            //{
                res.send(err);
            console.log(err);

            impactMapActivity.find({
                productName : req.body.productName
            }, function(err, data) {
                if (err)
                    res.send(err);

                console.log("Printing Data" + data)
                res.json(data);
            });
        }
    );

});

模板代码:

<span><button class=" aui-button dialog-show-button-impact div.actor-\{{$index}}"  style="float: left" title="$i18n.getText('add.activity')"
                                                                            ng-click="addActivity(actor.id)"><span class="aui-icon aui-icon-small aui-iconfont-add">Add</span>
                                                            </button>\{{actor.id}}</span>

按照建议删除 jquery 后更新代码:

$scope.addActivity = function(actor){

        AP.require('dialog', function(dialog){
            dialog.create({
                key: 'activity-content',
                width: '40%',
                height: '30%',
                chrome: true,

            });
        });

        AP.require('events', function(events){
            events.on('customEvent', function(){
                console.log(arguments[0]);
                var data = {
                    productName: $scope.productName,
                    actor: actor,
                    activity : arguments[0],
                    checked: false
                };

                $http.post('/addActivity', data)
                    .success(function(data){
                        $scope.data = data;
                        $scope.activities = [];

                        for (var activity in data) {

                            $scope.activities.push({
                                text: data[activity].activity,
                                id: data[activity].actor,
                                checked: data[activity].checked
                            });
                        }

                        actor = "";

                        AP.require("messages", function(messages){
                            //create a message
                            var message = messages.success('','Activity added');
                            setTimeout(function(){
                                messages.clear(message);
                            }, 2000);
                        });


                    }).error(function(data){

                        AP.require("messages", function(messages){
                            //create a message
                            var message = messages.error('','Error in Adding Activity');
                            setTimeout(function(){
                                messages.clear(message);
                            }, 2000);
                        });
                    });
            });
        });

    };

但我仍然面临同样的问题。

Answer 1

问题是 addActivity 函数每次调用时都会调用一个 .click 处理程序。因此，在第二次点击时，有两个 .click 处理程序附加到该元素。

有几种方法可以解决这个问题:

• 在 Angular 中重构代码并使用 ng-click(不可能)
• 只添加一次点击处理程序。这将涉及将点击处理程序移到 addActivity 函数之外。 (最好的方式)
• 使用jQuery.one (如 Sampath 所建议)。
• 使用name-spaced jQuery events .

---

重构后的代码应该是这样的:

AP.require('events', function(events){
    // ...
});


$scope.addActivity = function(actor){
  AP.require('dialog', function(dialog){
      // ...
  });
});