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 Charts 动态为工具提示元素生成DOM元素，在这种情况下需要使用$compile服务来绑定工具提示标记，以下示例演示了如何使用{{1}在工具提示中：

＆＃13;

ng-click

＆＃13;

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

＆＃13;

演示：Codepen

AngularJS访问动态创建的html元素

1 个答案: