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>

我的google graph api

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

我收到“未找到容器”的错误。

任何帮助表示赞赏谢谢。

Answer 1

永远不要在指令之外进行DOM操作。如果您在控制器或工厂或其他地方，并且您正在访问DOM元素，请停止并使用指令。该指令适用于它所影响的元素，并保持控制器和其他代码不受DOM访问，这意味着它们可以在不考虑特定视图的情况下进行测试。从代码中的随机位置修改DOM元素使得很难确定特定元素在特定位置结束的原因或者在其上设置的任何属性/样式。

现有的模块有操作/创建Google Charts的指令，如果你没有做你想做的事情你就可以编写自己的（一旦你编写了一个你可以写的指令就不那么难了）他们基本上都是:)）

基本的Google Chart指令如下所示

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


    }
  }
})

访问ng-template中的div标签

1 个答案: