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元素

回答

相關問題