钉钉小程序使用charts
本教程的第一部分着重于AngularJS控制器的使用和$scope的使用。 本教程的这一部分将重点介绍Angular指令与$scope的关系。 我们将从第一篇文章中停下来的地方开始。
指令是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定义的版本应显示在页面上。 现在，让我们创建一个用于显示图表的新指令。
让我们在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
