Question

我正在尝试使用输入字段中的值动态更新Google图表指令的宽度和高度。宽度和高度未更新。

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

Answer 1

使用chart.options更新Google图表属性，例如title，width，height等。

通过更改chart.options的值，无需更改div的宽度和高度。

使用ng-change更新chat.options

的值

通过添加input

更新ng-change元素

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

将以下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维度的最佳方法是使用options对象的chart属性。该指令监视该对象并响应更改。

Answer 4

基本上发生的事情是你的cssStyle属性是单向绑定所以你需要做的是你需要在width或height属性上计算css样式属性，如下所示：

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

注意：将你的角度上升到1.3.0 然后你会获得范围的$watchGroup方法。检查plunker：http://plnkr.co/edit/WEe3rPzapIBz3uhoGabI?p=preview

谷歌图表的动态样式

4 个答案: