无法在指令内的弹出框中触发onlick函数

Question

我已经在angular.js中编写了一个指令，它基本上在屏幕上绘制框来表示错误，每个错误都有一个弹出窗口，它是一个表，每一行包含一些信息栏。为了简化，我在这里只保留一个href库仑。我的要求是当我按下如下所示的压制href时，相应的javascipt函数应该被调用，但是在下面显示的代码中，函数suppressKey永远不会被解析。任何人都可以给我一些关于为何发生这种情况的指示？

DIRECTIVE

(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); 

}()); 

模板：

UPDATE

您好我已经试过的东西这里建议，但没有能够得到的结果，而使用范围和$编译是简单的乐测试。我不确定这篇文章中提到的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; 
     } 

改进的监控功能

 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的之前，所以我不知道如果我错过了一些简单的点。谢谢！

的Final Cut（即工作的一个）

 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函数不能从您的表中访问，因为事件未绑定到您的锚点元素。

更改var generatePopupHtml功能通过创建实际的元素，而不是使用字符串连接像这样建立起来的表：

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锚标记用点击事件。

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

Answer 2

您可能需要将suppressKey函数添加到适用范围，使其访问。您定义的suppressKey函数基本上是私有的，不能在链接函数之外访问。

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

Answer 3

我想你错过了compile元素，你通过指令添加了。您总是使用$ compile服务编译新添加的元素，以便元素将获得DOM注册。

只需添加下面一行分配canvas.innerHTML（首先在你的指令添加$compile依赖）后

$compile(canvas)(scope) 

希望这可以帮助你，谢谢。