2013-10-04 3 views
1

Google Charts에서 복사하여 붙여 넣은 코드를 보면 (방금 html, headbody 태그를 삭제했습니다). 이 코드는 내 index.html 페이지에 단순히 추가하면 막대 차트가 멋지게 표시됩니다.Google 막대 차트가 ng-view HTML 부분으로 표시되지 않습니다

그러나이 코드를 ng-viewrouteProvider 메커니즘에 의해 호출되는 HTML 부분으로 삽입하면 차트가 전혀 표시되지 않고 콘솔에서 오류가 발생하지 않습니다.

내가 확인해야 할 사항을 알고 있습니까?

<div> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Sales', 'Expenses'], 
      ['2004', 1000,  400], 
      ['2005', 1170,  460], 
      ['2006', 660,  1120], 
      ['2007', 1030,  540] 
     ]); 

     var options = { 
      title: 'Company Performance', 
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
     }; 

     var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 
</script> 

<div id="chart_div" style="width: 900px; height: 500px;"></div> 
</div> 

저는 angularjs 1.2 rc2를 사용합니다.

+1

아마 이것에 흥미가있을 것입니다 : http://bouil.github.io/angular-google-chart/ – lort

답변

3

이유는 템플릿에 작성된 인라인 자바 스크립트가 ng-view 내부에서 구문 분석되지 않기 때문입니다. 그것은 이상한 행동이고 내가 아는 유일한 해결책은 훨씬 더 이상합니다. 일반 jquery 스크립트 앞에 을 포함하여을 포함하고 지금은 <script> 태그가 파싱됩니다. 마법.

누군가 그 사실에 대한 확실한 설명을 알고 있다면, 나는 모두 귀입니다.

+0

보통 jquery 스크립트가 무엇을 의미합니까? ? –

+0

''를 '앞에 넣으십시오. – lort

+0

jquery2.03 분을 다운로드했는데 내게 말한 것처럼 삽입했지만 나에게 성공하지 못했습니다. –

관련 문제