谷歌圖表的動態樣式

Question

我想動態更新使用輸入字段值的谷歌圖表指令的寬度和高度。寬度和高度未被更新。

Plunker

$scope.height = "300" 
$scope.width = "300" 
$scope.cssStyle = "height:" + $scope.height+ "px; height:" + $scope.width + "px"; 

Answer 1

使用chart.options用於更新谷歌-圖表屬性等title，width，height等

通過改變chart.options值沒有必要改變寬度和div heigth。加入ng-change

<input type="text" value="300px" ng-change="change()" ng-model="width"/> 
<input type="text" value="300px" ng-change="change()" ng-model="height"/> 

使用ng-change爲chat.options

更新input元素的更新值下方添加change()功能控制器

$scope.change = function() { 
    $scope.chart.options = { 
     height: $scope.width, 
     width: $scope.height, 
    }; 
} 

檢查更新plunkr

Answer 2

錯字在第3行？

$scope.cssStyle = "height:" + $scope.height+ "px; height:" + $scope.width + "px"; 

是

$scope.cssStyle = "height:" + $scope.height+ "px; width:" + $scope.width + "px"; 

Answer 3

你必須在樣式聲明一個錯字：

//"height:" + $scope.height+ "px; height:" + $scope.width + "px"; 
    "height:" + $scope.height+ "px; width:" + $scope.width + "px"; 

$scope.cssStyle不會被不斷更新$scope.height和$scope.width變化。要解決這個問題，您可以將$scope.cssStyle轉換爲返回計算的函數。

<div google-chart chart="chart" style="{{cssStyle()}}"/> 

$scope.cssStyle = function() { 
    return "height:" + $scope.height+ "px; width:" + $scope.width + "px"; 
}; 

隨即，cssStyle正在更新你的願望，但google-chart指令似乎不使用新的參數更新。你可以通過從DOM中刪除它並重新添加它來解決這個問題。

<div ng-if="on" google-chart chart="chart" style="{{cssStyle}}"/> 

$scope.$watch(function() { 
    // watch this for changes 
    return "height:" + $scope.height+ "px; width:" + $scope.width + "px"; 
}, function(style) { 
    // there is a new style 
    $scope.on = false; // remove chart 
    $timeout(function() { 
    // trigger another digest cycle to add chart with new style 
    $scope.cssStyle = style; 
    $scope.on = true; 
    }); 
}); 

Click here for live demo.

感謝Sarjan的答案 - 他發現更新google-chart尺寸的最好方法是使用chart對象的options財產。該指令監視該對象並響應變化。

Answer 4

基本上所發生的事情是你cssStyle屬性是一個雙向綁定，所以你需要做的是，你需要計算的寬度或高度屬性的CSS樣式屬性如下：

$scope.$watchGroup(["width", "height"], function(newValues, oldValues){ 
    $scope.cssStyle = "height:" + $scope.height+ "px; width:" + $scope.width + "px"; 
    }) 

注：Upgarde你的角度1.3.0然後你會得到$watchGroup方法的範圍。 檢查plunker：http://plnkr.co/edit/WEe3rPzapIBz3uhoGabI?p=preview