AngularJS访问动态创建的html元素

AngularJS access dynamically created html elements

本文关键字：html 元素 创建 访问 动态 AngularJS      更新时间：2023-09-26

我试图访问一个新创建的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函数。谢谢你

Google Charts 动态为tooltip元素生成DOM元素，在这种情况下需要使用$compile服务来绑定tooltip标记，下面的示例演示了如何在tooltip中使用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

相关文章：