AngularJS access dynamically created html elements

Question

I am trying to access a function within a newly created DOM element but I cannot. I do not understand what I am doing wrong.

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

The code is alot, so I tried to include what is necessary only. Please let me know if you need any clarity.

Basically the button is displayed as a tooltip. but when I click it does not call the testFun function. Thank you

Answer 1

Google Charts dynamically generates DOM element for tooltip element, $compile service needs to be used in that case to bind the tooltip markup, the following example demonstrates how to use ng-click in tooltip:

 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> 

Demo: Codepen