Question

我正在尝试使用mdDialog中的chartjs-directive显示图形。图表的数据必须在控制器中生成。

我下载了该指令，其中一份文件说：

“Angular Chart-js指令[主页]

用法

通过脚本标签包含[chartjs]，可以使用bower或下载min
包括chartjs-directive.js。
将chartjs-directive添加为您的应用的依赖项。
制作<chart> s。“

通过bower安装Bower：

bash bower install angular-chartjs-directive

HTML

<div ng-app="chartjs-directive">
  <chart value="myChart"></chart>
</div>

我在mdDialog的html代码中使用了这段代码：

<div  class="container" style="width: 800px; height: 400px;" >
    <div ng-app="chartjs-directive">
        <chart value="myChart"></chart>
    </div>
</div>

<md-input-container class="md-block" flex-gt-sm>
    <label>{{teste}}</label>
</md-input-container>

（这里，{{teste}}用于查看控制器是否正常工作）

在我使用的索引html的顶部：

<script src="resources/js/Chart.js"></script>
<script src="resources/bower_components/angular/angular.min.js"></script>
<script src="resources/bower_components/chartjs/Chart.min.js"></script>
<script src="resources/bower_components/chartjs-directive/chartjs-directive.js"></script>

控制器：

function GraphController($scope, $mdDialog, $timeout, $http) {
  $scope.hide = function() {
    $mdDialog.hide();
  };
  $scope.cancel = function() {
    $mdDialog.cancel();
  };
  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
  $scope.search = function() {
    var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
      {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        data : [65,59,90,81,56,55,40]
      },
      {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : [28,48,40,19,96,27,100]
      }
    ]
  };

  $scope.teste = "123456";
  $scope.myChart.data = data;

  };

当用户点击按钮时，会调用函数search（）。

它仅适用于$ scope.teste，我无法显示图形...所以我尝试使用控制器脚本顶部的chartjs-directive作为依赖项添加到我的控制器：

我试图将我的功能更改为：

function GraphController($scope, $mdDialog, $timeout, $http,'chartjs-directive')

我的应用程序崩溃了;我还尝试在控制器脚本的顶部添加此代码：

angular.module('appControllers').controller('GraphController', GraphController);
GraphController.$inject = ['$scope', '$mdDialog', '$timeout', '$http','chartjs-directive'];

我的应用程序再次崩溃。

是否需要在mdDialog中使用chartjs-directive显示图形？

0 个答案: