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

Question

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

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){
      // ...
  });
});