Question

我已经编写了一个angularjs指令，它基本上在屏幕上绘制了一个框，我还以一个表的形式在弹出窗口中显示一些错误。当按下suppress时，该表有一个抑制键我希望生成一个我希望处理的事件。我面对下面的代码的问题是，一些抑制按钮正在生成其他不是的点击事件，这些按钮都在div内。我不知道发生了什么事可以请有人帮忙。我正在使用第三方smallipop jquery库进行弹出。发布以下指令。

指令

    (function () {

    var canvas;
    var directive = function ($compile, $q, mddErrorPanelFactory) {
        return {
            restrict: 'EA',
            scope: {
                componentId: '=',
                componentName: '=',
                siteName: '=',
                popupErrorDetails: '=',
                onSuppression: '&'
            },
            templateUrl: 'shared/directives/_square_draw.html',
            link: function (scope, element) {

                var suppressKey = function (event) {
                    var key = event.data.id;
                    scope.onSuppression({ suppressedKey: key });
                }

                var generatePopupHtml = function (errors, exchangeName) {

                    var htmlContent = $('<div></div>');

                    htmlContent.append('<h5 class="panel-danger">' + exchangeName + '</h5>');
                    var table = $('<table></table>');
                    table.addClass("table").addClass("table-bordered").addClass("table-condensed").addClass("table-hover");

                    for (var index in errors) {
                        var tbody = $('<tr id="' + errors[index].id + '"/>').addClass("warning").addClass("font-colour").addClass("mdd-font-size");
                        tbody.append('<td>' + errors[index].last_update_time + '</td>')
                            .append('<td>' + errors[index].error_time + '</td>')
                            .append('<td><input type="button"' + 'id=\"' + errors[index].id + '\">Suppress</input></td>')
                            .bind("click", { id: errors[index].id  }, function (event) {
                                console.log("Event generated on click")
                                suppressKey(event);
                            });
                        table.append(tbody);
                    }
                    htmlContent.append(table);
                    return htmlContent;
                }

         scope.$watch('[componentId,componentName,popupErrorDetails,siteName]', function (newValue) {
                    $('.myElement').smallipop();
                    var canvas = document.getElementById("canvas");
                    if (canvas === null) {
                        canvas = document.getElementById(newValue[0] + newValue[3]);
                    }

                    canvas.id = newValue[0] + newValue[3];
                    canvas = document.getElementById(canvas.id);
                    var errors = newValue[2];
                    var tooltipSpan = $('<span class="smallipop-hint"/>');
                    tooltipSpan.append(generatePopupHtml(errors, newValue[1]));

                    var innerHtml = $('<div id="' + canvas.id + '"></div>');
                    innerHtml.append('<strong>' + newValue[1] + '</strong>');
                    innerHtml.append(tooltipSpan);

                    $('#' + canvas.id).append(innerHtml);
                }, true)
            }
        };
    };

    app.directive('squareDraw', directive);
}());

_square_draw.html

<div id="canvas" class="mdd-table-responsive table-bordered mdd-table-hover myElement">
</div>

修改

进一步看，似乎每次使用ng-repeat创建的div只触发一次点击事件，而click只触发一次事件。

将事件绑定到动态生成的按钮

0 个答案: