AngularJS访问动态创建的html元素

我想访问新创建的DOM元素中的函数，但我不能。我不明白我做错了什么。AngularJS访问动态创建的html元素

$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函数。谢谢

来源

2016-09-28 vladimir999

目前还不清楚与上午您提供的代码数量。你用参数推送数组..其中之一是“html”字符串。你在哪里编译这个html字符串？ –

好的，html用于在Google图表时间轴上创建工具提示。但是一旦点击我就无法访问我的功能。 – vladimir999

我所能做的就是在创建元素后点击我的功能。 – vladimir999

谷歌图表动态产生的DOM元素的工具提示元素，$compile服务需要在这种情况下要使用的工具提示标记绑定，下面的例子演示了如何在工具提示使用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

来源

2016-10-17 19:02:14

AngularJS访问动态创建的html元素

回答

相关问题