Первая часть этого руководства была посвящена использованию контроллеров 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); ,
Теперь просто добавьте 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
Давайте создадим новую директиву с именем 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 в div в index.html как показано ниже:
<div ng-controller="MyCtrl1" id="chartdiv" g-chart></div>
Затем запустите приложение, и вы сможете увидеть график.
На данный момент мы используем контроллеры для заботы о логике приложения. Данные присваиваются представлению через $scope , а манипулирование DOM обрабатывается с помощью директивы.
Больше информации о директивах
При создании директивы мы можем указать, как мы хотим использовать директиву. Например, директива может использоваться как класс, атрибут или тег. В этом уроке мы будем использовать нашу директиву в качестве атрибута. Следовательно, мы можем явно объявить, что используя 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 .