将 html 中的值发送到 angularjs 中的控制器。范围问题？

Question

我有一个网络应用程序设置为使用 highcharts-ng 指令显示图表。

我有相同类型的图表，在多个视图上显示相同系列的数据。图表之间的唯一区别是我希望在 html 标记中初始化图表时能够设置的高度值。

我是这样设置的：

highcharts-ng 指令是通过 bower 安装的。

我按如下方式初始化我的图表：

<div ng-controller="AgeChartController" >
    <highchart diagramHeight="500" id="{{link + '_chart'}}" config="ageChartConfig">
</highchart></div>

在我的 AgeChartController 中，我执行以下操作：

从 JSON 文件中提取数据
从 diagramHeight 获取图表高度属性

构造 Highcharts 选项对象并将图表高度发送到此选项对象

angular.module('socialDashboard')    
.controller('AgeChartController', function ($scope, $http, $attrs) {

var seventeenCount = 0;
var eighteenCount = 0;
var twentyFiveCount = 0;
var thirtyFiveCount = 0;
var chartHeight = 0;
var posts = [];

$http.get('dummy_content.json')
.then(function(res){
posts = res.data;

for (var i = 0; i < posts.length; i++) {
  if (posts[i].age <= 17) {
    seventeenCount++;
  }
  else if ((posts[i].age >= 18) && (posts[i].age <= 24)) {
    eighteenCount++;
  }
  else if ((posts[i].age >= 25) && (posts[i].age <= 34)) {
    twentyFiveCount++;
  }
  else if (posts[i].age >= 35) {
    thirtyFiveCount++;
  }
}

chartHeight = $attrs.diagramHeight;

$scope.ageChartConfig = {
  options: {
    chart: {
      type: 'bar',
      height: chartHeight,
      backgroundColor: false
    }
  },
  title: {
    text: false
  },
  xAxis: {
    categories: ['< 17', '18 - 24', '25 - 34', '> 35']
  },
  yAxis: {
    gridLineWidth: 0,
    title: {
      text: 'Post count'
    },
    labels:
    {
      enabled: false
    }
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true
      }
    }
  },
  legend: {
    layout: 'vertical',
    floating: true,
    backgroundColor: '#FFFFFF',
    align: 'right',
    verticalAlign: 'top',
    y: 60,
    x: -60
  },
  tooltip: {
    formatter: function () {
      return '<b>' + this.series.name + '</b><br/>' +
        this.x + ': ' + this.y;
    }
  },
  navigation: {
    buttonOptions: {
      enabled: false
    }
  },
  series: [{
    name: 'Post count',
    showInLegend: false,
    data: [{
      color: '#9365b8',
      y: seventeenCount
    }, {
      color: '#2c82c9',
      y: eighteenCount
    }, {
      color: '#41a85f',
      y: twentyFiveCount
    }, {
      color: '#fac51c',
      y: thirtyFiveCount
    }]
  }],
  loading: false
};

});

});

然而，当我在其他地方声明我的图表并将 diagramHeight 设置为 200 时：

<div ng-controller="AgeChartController">
    <highchart diagramHeight="200" id="{{link + '_chart'}}" config="ageChartConfig">
</highchart></div>

两个值中只有一个被拉出，我的图表在所有图表中设置相同（高度 500）。为什么是这样？这与我的范围有关吗？我是 angular 的新手，但仍在了解范围。

Answer 1

您应该使用 angular 工厂来配置图表

app.factory('chartname', function () {
    var agechart={   // your all chart option here
        .
        .
   }
   return agechart;
});

你现在可以像

一样在任何控制器中使用上面的工厂

app.controller("controllername",function(chartname){
   $scope.ageChartConfig=chartname;
});

将 html 中的值发送到 angularjs 中的控制器。范围问题？

Sending a value from html to controller in angularjs. Issue with scope?

angularjs

highcharts

angularjs-directive