使用Google Charts API和AngularJS创建可视化应用程序–第2部分

本教程的第一部分着重于AngularJS控制器的使用和$scope的使用。 本教程的这一部分将重点介绍Angular指令与$scope的关系。 我们将从第一篇文章中的开头开始。

AngularJS指令

指令是AngularJS另一个有趣且重要的方面。 指令是自定义标签或属性，可增强HTML的功能。 例如，考虑一个简单的input元素：

<input type="text" />

现在，假设我们为日期选择器编写了一条指令，并将其应用于上述输入元素。 我们将以以下方式应用它。

<input type="text" datepicker />

在第一个教程中，我们收集了图表数据以及图表选项，并将数据绑定到控制器的div 。 但是，指令提供了一种更好且更有条理的方法来完成同一件事。 在编写我们自己的指令之前，让我们看一下Angular种子项目中已经存在的指令。 打开app/js/directives.js并找到以下代码：

'use strict';

/* Directives */

angular.module('myApp.directives', []).
  directive('appVersion', ['version', function(version) {
    return function($scope, elm, attrs) {
      elm.text(version);
    };
  }]);

本示例定义了一个名为appVersion的指令。 请注意，当我们将该指令（其名称用CamelCase编写）添加为元素的自定义标签时，大小写将转换为SnakeCase 。

在此指令中，我们为该指令所附加的元素分配一个版本号。 但是，这个版本号从哪里来？ 好吧，我们有一个叫做AngularJS服务的东西，这就是版本的来源。 打开app/js/services.js ，您可以看到在那里定义的版本号。

'use strict';

/* Services */

// In this case it is a simple value service.
angular.module('myApp.services', []).
  value('version', '0.1');

为了访问指令中的version值，使用以下代码将其注入指令中：

directive('appVersion', ['version', function(version) {

然后，使用elm.text(version);将其分配给元素elm.text(version); 。

现在，只需将div添加到index.html ，如下所示。 这appVersion指令附加到span元素。

<div >Angular seed app: v<span app-version></span></div>

要运行该应用程序，请在终端窗口中发出以下命令。

node scripts/web-server.js

接下来，将浏览器指向http://localhost:8000/app/index.html 。 services.js定义的版本应显示在页面上。 现在，让我们创建一个新指令以显示图表。

创建一个AngularJS指令

让我们在directives.js创建一个名为gChart的新directives.js ：

'use strict';

/* Directives */

angular.module('myApp.directives', []).
directive('appVersion', ['version',
  function (version) {
    return function ($scope, elm, attrs) {
      elm.text(version);
    };
  }
])
  .directive('gChart', function () {
    return function ($scope, elm, attrs) {
    };
  });

在上一篇文章中，我们将数据绑定在控制器本身中。 这次我们要使用$scope传递数据并将其绑定到指令中。 修改后的代码如下所示。

'use strict';

/* Directives */

angular.module('myApp.directives', []).
directive('appVersion', ['version',
  function (version) {
    return function ($scope, elm, attrs) {
      elm.text(version);
    };
  }
])
  .directive('gChart', function () {
    return function ($scope, elm, attrs) {
      var chart = new google.visualization.LineChart(document.getElementById('chartdiv'));

      chart.draw($scope.chart.data, $scope.chart.options);
    };
  });

在controllers.js ，删除将数据绑定到div的最后两行，而是将图表数据和选项保存在$scope 。 该文件现在应如下所示：

'use strict';

/* Controllers */
google.load('visualization', '1', {packages:['corechart']});

google.setOnLoadCallback(function () {
  angular.bootstrap(document.body, ['myApp']);
});

angular.module('myApp.controllers', []).
  controller('MyCtrl1', ['$scope', function($scope) {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004', 1000, 400],
      ['2005', 1170, 460],
      ['2006', 660, 1120],
      ['2007', 1030, 540]
    ]);
    var options = {
      title: 'Company Performance'
    };
    var chart = {};

    chart.data = data;
    chart.options = options;
    $scope.chart = chart;
  }])
  .controller('MyCtrl2', [function() {
  }]);

现在，将gChart指令添加到index.html的div中，如下所示：

<div ng-controller="MyCtrl1" id="chartdiv" g-chart></div>

接下来，运行该应用程序，您应该能够看到该图。

此时，我们正在使用控制器来处理应用程序逻辑。 数据通过$scope分配给视图，并且使用指令处理DOM操作。

有关指令的更多信息

在创建指令时，我们可以指定如何使用指令。 例如，指令可用作类，属性或标签。 在本教程中，我们将使用指令作为属性。 因此，我们可以使用restrict : A来明确声明restrict : A 。 下面显示了使用此方法的简约指令。

.directive('gChart', function() {
  return {
    restrict: 'A',
    link: function($scope, elm, attrs) {
      var chart = new google.visualization.LineChart(document.getElementById('chartdiv'));

      chart.draw($scope.chart.data, $scope.chart.options);
    }
  };
});

我们还可以从指令代码中删除硬编码的chartDiv并使用elm参数访问它，如下所示。

.directive('gChart', function() {
  return {
    restrict: 'A',
    link: function($scope, elm, attrs) {
      var chart = new google.visualization.LineChart(elm[0]);

      chart.draw($scope.chart.data, $scope.chart.options);
    }
  };
});

结论

在本教程中，我们重点介绍指令的使用。 在本教程的下一部分中，我们将更深入地研究AngularJS的双向绑定功能，并将其合并到我们现有的应用程序中。 同时，本文的所有代码都可以在GitHub上找到 。

From: https://www.sitepoint.com/creating-visualization-app-using-google-charts-api-angularjs-part-2/