動態Google圖表取決於AngularJS $ scope的值

Question

我是AngularJS和Google圖表的新手，我已經使用AngularJS的數據創建了一個Google圖表。 它工作正常，現在我需要根據我的Angular #scope值使該圖表具有動態性。

我有一個過濾器按鈕，如果單擊它，它將更改我的Angular Scope值，具體取決於我需要更改圖表。我的代碼如下

<div id="side_pane" class="side">
  <label>GENDER</label></br>
  <label><input type="radio" ng-model='gender' ng-value='"M"' name="gender">MALE</label></br>
  <label><input type="radio" ng-model='gender' ng-value='"F"' name="gender">FEMALE</label><br/></br>
  <div>     
    <button ng-click="getFilterData(gender)">FILTER</button>
  </div> //Filter Button
</div>
<div id="fc">
  <div ng-view id="calender_chart_id" style="width:100%; height: 200px; margin-left:100px;"></div> 
</div>

<script type="text/javascript" src="public/modules/AreaChart.js"></script> //Google chart call

如果您不熟悉Google圖表，請考慮將其視為普通的JS文件。謝謝

Answer 1

您可能知道Angular具有雙向數據綁定，可監視dom /模型並相應地更新每個模型。 “基本”腳本僅在運行后才執行，因此更改范圍不會使圖表發生變化。 您也許可以在控制器中使用Chart對象來重新呈現該對象。 但是根據我的經驗，這會產生一些簡單的代碼。

但是你很幸運。 由於有一個非常不錯的angular-google-chart庫。 這使您可以使用角度數據綁定來動態更新圖表。 它還允許您使用指令將圖表注入dom。

angular-google-charts庫