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

It is unclear with the amount of code you provided. Your pushing an array with parameter.. one of which is "html" string. where are you compiling this html string? — Ravi Teja, Sep 28 '16 at 12:32
Okay, the html is used to create a tooltip on a google chart timeline. But I cannot access my functions once it is clicked. — kg99, Sep 28 '16 at 12:34
What I was is to be able to access my functions on click after creating the elements. — kg99, Sep 28 '16 at 12:35
When you create HTML dynamically they should be compiled and a scope should be assigned for them. Only then, any methods or variables present on that html will know which scope do they belong to. See this http://stackoverflow.com/questions/20025526/angularjs-dynamically-creating-elements-that-specify-directives — Ravi Teja, Sep 28 '16 at 12:42
I tried that, it still does not work. I think Its because google charts draws those tooltips and not me — kg99, Sep 28 '16 at 13:04

score 0 · Answer 1 · answered Oct 17 '16 at 19:02

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

AngularJS access dynamically created html elements

1 Answers1