钉钉小程序使用charts

本教程的第一部分着重于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);
    }
  };
});
结论

<source type="image/webp"><source><img src="https://s2.51cto.com/images/blog/202406/26185032_667bf27883a3b16848.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="">

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

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

钉钉小程序使用charts