AngularJS访问动态创建的html元素

Question

我正在尝试访问新创建的DOM元素内的函数，但不能。 我不明白我在做什么错。

$scope.createCustomHTMLContent = function(img, evtTime, cmname, evt, cust, serv, descr, duration) {

   var html =  '<div class="row"><div class="btn-default"><button ng- click="testFun()">Edit</button></div>' + '</div>';

  return html;

}


rows.push([""+cmname, ""+id,$scope.createCustomHTMLContent(thumbpath, evtTime, cmname, evt, cust, serv, descr, 0),new Date(datetime), new Date(datetime1),'color:'+colors[serv]]);
chart.draw(dataTable, options);

该代码很多，因此我尝试仅包括必要的内容。 如果您需要任何澄清，请告诉我。

基本上，按钮显示为工具提示。 但是当我单击它时，不会调用testFun函数。 谢谢

Answer 1

Google图表会为工具提示元素动态生成DOM元素，在这种情况下，需要使用$compile服务绑定工具提示标记，以下示例演示了如何在工具提示中使用ng-click ：

 angular.module('ChartApp', []) .controller('ChartCtrl', function ($scope, $compile) { $scope.logItems = []; $scope.viewDetails = function (index) { $scope.logItems.push(index + ' row clicked'); }; $scope.initChart = function () { google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Year'); dataTable.addColumn('number', 'Sales'); // A column for custom tooltip content dataTable.addColumn({ type: 'string', role: 'tooltip', p: { html: true } }); dataTable.addRows([ ['2010', 600, '<div id="tooltip-inner-container"><h2>Details for 2010 year</h2> <br/><button ng-click="viewDetails(0)">View</button></div>'], ['2011', 1500, '<div id="tooltip-inner-container"><h2>Details for 2011 year</h2> <br/><button ng-click="viewDetails(1)">View</button></div>'], ['2012', 800, '<div id="tooltip-inner-container"><h2>Details for 2012 year</h2> <br/><button ng-click="viewDetails(2)">View</button></div>'], ['2013', 1000, '<div id="tooltip-inner-container"><h2>Details for 2013 year</h2> <br/><button ng-click="viewDetails(3)">View</button></div>'] ]); var options = { tooltip: { isHtml: true, trigger: 'selection' }, }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(dataTable, options); // function initTooltip() { var tooltip = document.getElementById("tooltip-inner-container"); if (tooltip != null){ var t = $compile(tooltip.outerHTML)($scope); angular.element(tooltip).replaceWith(t); } } google.visualization.events.addListener(chart, 'select', initTooltip); google.visualization.events.addListener(chart, 'onmouseover', initTooltip); google.visualization.events.addListener(chart, 'onmouseout', initTooltip); } }; $scope.initChart(); }); 

 <script src="https://code.angularjs.org/1.4.8/angular.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div ng-app="ChartApp" ng-controller="ChartCtrl"> <pre style="width: 30%; height: 10pc; overflow-y: scroll; float:left;"> {{logItems | json}} </pre> <div id="chart_div" style="float:left; width:60%; height: 180px;"></div> </div> 

演示： Codepen