Zugriff auf div-Tag in ng-Vorlage

Question

I want to access "chart_div" 

    <script type="text/ng-template" id="one.tpl.html"> 
<div class="row"> 
<div class="col-sm-6"> 
    <ul class="list-style-2" "user in results.users"> 
    <li ng-repeat="atmpt in user.attempts" > 
    {{$index+1+':'}} 
     Marks: <span class="label label-info">{{atmpt.marks+'/'+atmpt.total_marks}} 
     </span> 
     | Percentage: <span class="label label-success">{{atmpt.percent+'%'}}</span> 

     </li> 
    </ul> 
    </div> 
    <div id="chart_div" class="graph"></div> 

    </div> 
</script> 

für mein Google Graph api als

var chart = new google.visualization.ColumnChart(
     document.getElementById('chart_div')); 
     chart.draw(data, options); 

Ich erhalte eine Fehlermeldung wie "Container nicht gefunden".

Jede Hilfe geschätzt Vielen Dank.

Answer 1

Niemals DOM-Manipulation außerhalb der Direktiven vornehmen. Wenn Sie sich in einem Controller oder einer Fabrik oder an einem anderen Ort befinden und auf DOM-Elemente zugreifen, halten Sie an und verwenden Sie eine Direktive. Die Direktive wird auf die Elemente angewendet, die sie betrifft, und wenn die Controller und anderer Code frei von DOM-Zugriffen sind, können sie ohne Rücksicht auf eine bestimmte Sichtweise getestet werden. Das Ändern von DOM-Elementen von zufälligen Stellen im Code macht es sehr schwierig festzuhalten, warum ein bestimmtes Element an einem bestimmten Ort gelandet ist oder welche Attribute/Stile darauf gesetzt sind.

Es gibt vorhandene Module, die Anweisungen zum Manipulieren/Erstellen von Google Charts haben, wenn man nicht das tut, was man will, kann man sein eigenes schreiben (nicht wirklich schwer, wenn man erst einmal eine Direktive geschrieben hat :))

ein grundlegend Google Chart Direktive wird unter

http://plnkr.co/edit/aY5SBetA1KJ12YpphVt0?p=preview

// Code goes here 
angular.module('example', []) 
.directive('googleChart', function(){ 
    return { 
    restrict:'E', 
    link:function(scope, element, attrs){ 
     function drawChart(){ 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Topping'); 
     data.addColumn('number', 'Slices'); 
     data.addRows([ 
      ['Mushrooms', 3], 
      ['Onions', 1], 
      ['Olives', 1], 
      ['Zucchini', 1], 
      ['Pepperoni', 2] 
     ]); 

     // Set chart options 
     var options = {'title':'How Much Pizza I Ate Last Night', 
         'width':400, 
         'height':300}; 

     var chart = new google.visualization.ColumnChart(element[0]); 
     chart.draw(data, options); 
     } 

     // Load the Visualization API and the corechart package. 
     google.charts.load('current', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.charts.setOnLoadCallback(drawChart); 


    } 
    } 
})