javascript - 无法在指令内的弹出窗口中触发 onclick 函数

Question

我在 angular.js 中编写了一个指令，它基本上在屏幕上绘制方框来表示错误，每个错误都有一个弹出窗口，它是一个表格，每行包含一些信息列。为了简单起见，我在这里只保留了一个 href 。我的要求是，当我按下如下所示的抑制 href 时，应该调用相应的 javascipt 函数，但是在下面显示的代码中，函数 suppressKey 永远不会解析。有人能给我一些关于为什么会发生这种情况的指示吗？

指令

(function () {

    var canvas;
    var directive = function () {
        return {
            restrict: 'EA',
            scope: {
                componentId: '=',
                componentName:'=',
                siteName:'=',
                popUpHtml:'=',
                popupErrorDetails:'=',
                onMouseEnter: '&',
                onMouseLeave:'&'
            },
            templateUrl:'shared/directives/_square_draw.html',
            link : function( scope, element ) {

                var suppressKey = function() {
                    console.log( "Clicked on the suppress link" );
                }

                var generatePopupHtml = function( errors, exchangeName, onClickHandler ) {

                    var html_content = new Object();
                    html_content = '<h5 class="panel-danger">' + exchangeName + '</h5>';
                    html_content += '<table class="table table-bordered table-condensed table-hover" style="display=none">';

                    for (var index in errors) {

                        html_content += '<td><a href="#" onclick="suppressKey()">Suppress</a></td>';
                        html_content += '</tr>';
                    }
                    html_content += '</table>';
                    return html_content;
                }

                scope.$watch('[componentId,componentName,popupErrorDetails,siteName]',function(newValue) {
                    $('.myElement').smallipop();
                    var canvas = null;
                    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 innerHtml = generatePopupHtml( errors, newValue[1] );
                    canvas.innerHTML= '<div" id="' + canvas.id +'"><strong>' + newValue[1] + '</strong>' + '<span class="smallipop-hint">'+ innerHtml + '</span></div>';
                 }, true )

            }
        };
    };

    app.directive('squareDraw', directive);

}());

模板:

<div id="canvas" class="mdd-table-responsive table-bordered mdd-table-hover myElement" style="font-size: 10px;display:'none';background-color: #F3A793;min-height: 100%;min-width:95%;border:1px solid black;">

</div>

更新

嗨，我已经尝试了这里建议的内容，但无法获得结果，而使用范围和 $compile 很容易测试。我不确定帖子中建议的 jquery 更改，因此我再次发布我的代码以及我收到的错误。

        var generatePopupHtml1 = function( errors, exchangeName ) {
            var htmlContent = $('<div></div>');
            htmlContent.append('<h5 class="panel-danger">' + exchangeName + '</h5>');

            var table = $('<table class="table table-bordered table-condensed table-hover" style="display=none">');

            for (var index in errors) {
                table.append("<tr></tr>")
                    .append("<td></td>")
                    .append("<a href='#'>Suppress</a>")
                    .bind("click", function () {
                        console.log("bound event");
                    });
            }
            htmlContent.append(table);
            return htmlContent;
        }

修改 watch 功能

        scope.$watch('[componentId,componentName,popupErrorDetails,siteName]',function(newValue) {
            $('.myElement').smallipop();
            var canvas = null;
            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( generatePopupHtml1( errors, newValue[1] ) );

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

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

控制台中出现错误

 Uncaught TypeError: Cannot read property 'options' of undefinedjquery.smallipop.min.js:11 cbjquery.js:4430 jQuery.event.dispatchjquery.js:4116 jQuery.event.add.elemData.handle

我以前从未使用过jquery，所以我不确定我是否遗漏了一些简单的点。谢谢!

最终剪辑(有效的)

        var suppressKey = function( user, key ) {
            console.log( "Clicked on the suppress link >>>>> " + user + " " + key );
        };

        var generatePopupHtml1 = function( errors, exchangeName ) {

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

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

            for (var index in errors) {
                var url = generateCacheDumpUrl(errors[index].id);
                table.append('<tr class="warning font-colour mdd-font-size">')
                    .append('<td><a href="' + url + '" target="_blank">' + errors[index].id + '</a></td>')
                    .append( '<td><a href=\"#\"' + 'id=\"' + errors[index].id + '\">Suppress</a></td>')
                    .bind("click", { id: errors[index].id  }, function(event) {
                        var data = event.data;
                        console.log( "Clicked on suppresskey " + data.id );
                        suppressKey( 'droy', data.id );
                    });
            }
            htmlContent.append(table);
            return htmlContent;
        }

Answer 1

您的 suppressKey 函数无法从您的表访问，因为该事件未绑定(bind)到您的 anchor 元素。

更改您的 vargeneratePoppHtml 函数，通过创建实际元素而不是像这样使用字符串连接来构建表格:

var htmlContent = $('<div></div>');
 htmlContent.append('<h5 class="panel-danger">' + exchangeName + '</h5>');

 var table = $('<table class="table table-bordered table-condensed table-hover" style="display=none">');

 for (var index in errors) {
    var row = $("<tr></tr>")
        .append("<td></td>")
        .append("<a href='#'>Suppress</a>");

    row.find("a").bind("click", function () {
        console.log("bound event");
    });
    table.append(row);
 }

 htmlContent.append(table);
 return htmlContent;

一个快速修复方法是使用点击事件包装您的表格 html 和 .bind anchor 标记。

return $(html_content).find("a").bind("click", function () {
    console.log("Clicked on the suppress link");
});