Как использовать угловые директивы

Код выглядит очень похоже на то, что мы сделали в index.html. Мы показываем какой-то заголовок, а затем перебираем список. Разница в том, что, во-первых, нам нужно написать этот код только один раз, а во-вторых, он находится в другом файле - это означает, что не все находится в нашем index.html. Это делает наш код более модульным. Выше mylist - это параметр, и его значение будет меняться в зависимости от того, с каким аргументом мы вызываем директиву. Перейдя к нашему файлу singlelist.js, мы настраиваем часть нашей директивы, относящуюся к JavaScript.

Здесь мы называем нашу директиву singlelist и настраиваем ее работу. Мы устанавливаем значение ‘mylist’ в нашей области и устанавливаем templateUrl как путь к файлу singlelist.html. В основном, когда директива вызывается в нашем представлении, аргумент будет привязан к параметру (mylist), который будет добавлен как атрибут в область видимости. Затем, когда значение параметра задано в области видимости, директива возьмет код из нашего templateUrl и вставит его туда, где была вызвана директива. Все, что нам нужно сделать, это импортировать эту директиву и вызвать ее в нашем HTML-коде. Чтобы импортировать директиву, напишем…

Затем мы вызываем его в нашем index.html, чтобы он действительно повлиял на нашу веб-страницу. Прямо сейчас код для нашей директивы написан, но он не используется на нашей живой веб-странице - нашем представлении - нашем index.html. Для этого удалим часть нашего предыдущего кода и напишем…

Обратите внимание, мы используем одну и ту же директиву для обоих списков. Здесь ‘mylist’ - параметр, который будет содержать соответствующие данные (‘todo’ или ‘books’) для данного списка. В первом вызове «todo» является аргументом директивы, а во втором вызове «книги» является аргументом. Прямо сейчас у объектов «todo» и «books» в области видимости есть только список внутри них, но мы могли бы добавить больше данных, таких как заголовок, чтобы усилить эти объекты.

Теперь, когда мы извлекаем заголовок из mylist в шаблоне директивы (singleList.html), мы получим фактический заголовок. Итак, если мы откроем веб-страницу…

У нас есть проблемы с безопасностью. Мы можем исправить это с помощью модуля под названием http-server. Для этого мы откроем терминал, перейдем в нашу папку с помощью команды cd и воспользуемся npm, чтобы получить наш модуль. Если у вас нет npm, вы можете скачать его здесь.

Теперь, когда у нас есть модуль, мы можем продолжить и написать http-server в нашей командной строке и получить доступ к нашей веб-странице. При выполнении этой команды убедитесь, что вы находитесь в папке с index.html.

Открыв веб-страницу, теперь у нас есть элементы, и наш код выглядит потрясающе и эффективно!

Давайте подумаем, как мы это сделали. Во-первых, у нас был index.html, который похож на штаб-квартиру нашего кода. Мы написали код, а затем добавили angular, связав его в index.html, инициализировав модуль в файле app.js, а затем создание контроллера, который будет обрабатывать наши данные. Мы устанавливаем атрибуты ng-app и ng-controller в index.html, а затем устанавливаем данные в области из файла контроллера, который будет в конечном итоге будет доступен в представлении - в нашем index.html. Когда мы увидели, что наш код повторяется, мы добавили директиву, которая позволяла нам использовать один и тот же блок HTML-кода в разных местах. Мы вызвали директиву из index.html, параметр получил значение аргумента в singlelist.js, а код из шаблона (singlelist.html) был запущен и вставлен в документ index.html.

Пока наш код короткий и удобный, и он делает все, что мы хотим. У нас есть два списка: один для дел, а другой - для книг. Однако профессора часто публикуют только номер ISBN для необходимых книг, что ничего не значит, если пользователь не может преобразовать номер в название. Что, если мы добавим номер ISBN к нашему списку книг, он превратится в небольшую аннотацию с названием и автором? Это то, что мы сделаем на следующей неделе с API Google Книг . Тогда увидимся!

То, что нужно запомнить:

<!-- Create a Function with Parameters -->
$scope.myfunction = function(n, m) {
  		return n * m;
}
<!-- How to Call a Function with Arguments -->
myfunction(5, 10);
<!-- Create a Directive JS File -->
app.directive('nameofdirective', function() {
	return {
		restrict: 'E',
		scope: {
			paramone:'='
		},
		templateUrl: 'js/directives/templateName.html'
	}
})
<!-- How to Call a Directive with Parameters<
<nameofdirective paramone="dataVariableNameFromScope"></nameofdirective>

Плюс немного дополнений:

<!-- What restrict = 'E' means? -->
It means we can only invoke the directive through elements 
(instead of through attributes or something else). This 
makes it so all of our code invokes this attribute in 
the same way. 
<!-- How to Call a Directive without Parameter -->
<mydirective></mydirective>
<!-- Parameters VS Arguments -->
The formal parameter is what's given in the function 
declaration/definition where as the actual argument is 
what's passed when calling the function.
<!-- What is http-server? -->
Http-server creates a web server that responds to requests 
from web browsers and serves up local files.
<!-- More Tutorials About Command Line? -->
Check out more terminal tutorials on my YouTube Channel!
http://bit.ly/1ZD8CcG

Код из этого сообщения в блоге