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
– Ravi Teja, Commented Sep 28, 2016 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
– kg99, Commented Sep 28, 2016 at 12:34
What I was is to be able to access my functions on click after creating the elements. — kg99
– kg99, Commented Sep 28, 2016 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 stackoverflow.com/questions/20025526/… — Ravi Teja
– Ravi Teja, Commented Sep 28, 2016 at 12:42
I tried that, it still does not work. I think Its because google charts draws those tooltips and not me — kg99
– kg99, Commented Sep 28, 2016 at 13:04

Vadim Gremyachev · Accepted Answer · 2016-10-17 19:02:14Z

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

Collectives™ on Stack Overflow

AngularJS access dynamically created html elements

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related