Различия

Здесь показаны различия между двумя версиями данной страницы.

--- angular:angularjs:custom_directive:templates [2020/05/28 23:46]
werwolf
+++ angular:angularjs:custom_directive:templates [2023/01/12 12:18] (текущий)
@@ Строка 1: / Строка 1: @@
-=====Шаблоны директив=====
+===== Шаблоны в директивах AngularJS =====
-В прошлых темах мы рассмотрели создание директив, в которых применялось API jqLite с использованием метода //angular.element()// и т.д. Но есть альтернативный подход, который заключается в использовании шаблонов. Функциональность шаблонов построена вокруг свойства: **template**.
+Очень часто в приложении нам хочется инкапсулировать кусок шаблона с какой-то логикой, для того, чтобы его потом повторно использовать. В этом нам помогут директивы с их шаблонами и линк функцией.\\
 \\
-Используем шаблоны в директиве:
+Давайте для начала создадим директиву.
 <code javascript>
-questApp.directive("answerList", function () {
+    <foo-bar></foo-bar>
+</code>
+И опишем ее
+<code javascript>
+    <foo-bar></foo-bar>
+</code>
+Напишем link функцию и выведем в консоль fooBar, чтобы проверить, что наша директива срабатывает. Если мы посмотрим в браузер, то увидим в консоли fooBar.
+{{ :angular:angularjs:custom_directive:directive32.png |}}
+У директивы есть проперти, которое называется template. Давайте напишем template Hello world.0
+<code javascript>
+app.directive('fooBar', function () {
     return {
+        template: "Hello world",
         link: function (scope, element, attrs) {
+            console.log('fooBar');
-            scope.data = scope[attrs["answerList"]];
+        }
-        },
+    };
-        restrict: "A",
-        template: "<div class='answers'>" +
-        "<div ng-repeat='answer in data.answers' class='answer'>" +
-            "<div class='vote'>" +
-            "<a class='vote-up' ng-click='voteUp(answer)'></a>" +
-            "<span class='rate'>{{answer.rate}}</span>" +
-            "<a class='vote-down' ng-click='voteDown(answer)'></a>" +
-        "</div>" +
-        "<b>{{answer.text}}</b>" +
-        "<p>{{answer.author}}</p>" +
-        "<p><i>{{answer.date}}</i></p>" +
-    "</div></div>"
-    }
 });
 </code>
-В шаблонах используются все те же стандартные директивы и выражения AngularJS.\\
+В браузере мы увидим Hello world внутри нашей директивы.
-\\
-Чтобы упростить использования шаблонов, мы можем использовать внешние файлы для их хранения. Создадим рядом с главной страницей index.html папку **templates**. Добавим в нее новый файл **answersTemplate.html** со следующим содержимым:
-<code html>
+{{ :angular:angularjs:custom_directive:directive33.png |}}
-<div class="answers">
-    <div ng-repeat="answer in question.answers" class="answer">
+Как мы видим темплейтом является то, что написано внутри директивы.\\
-        <div class="vote">
+Темплейты - это не просто строки. Сюда можно написать разметку, например, div.
-            <a class="vote-up" ng-click="voteUp(answer)"></a>
-            <span class="rate">{{answer.rate}}</span>
+<code javascript>
-            <a class="vote-down" ng-click="voteDown(answer)"></a>
+app.directive('fooBar', function () {
-        </div>
+    return {
-        <b>{{answer.text}}</b>
+        template: "<div>Hello world</div>",
-        <p>{{answer.author}}</p>
+        link: function (scope, element, attrs) {
-        <p><i>{{answer.date}}</i></p>
+            console.log('fooBar');
-    </div>
+        }
-</div>
+    };
+});
 </code>
-Теперь проект выглядит следующим образом:\\
+У нас внутри директивы отрендерился div с текстом Hello world внутри. В шаблонах можно написать любую разметку с классами и какими-то своими стилями.
-{{ :angular:angularjs:custom_directive:21.png?200 |}}
+{{ :angular:angularjs:custom_directive:directive34.png |}}
+Теперь давайте попробуем добавить переменную. Для этого в link функции опишем переменную scope.name и выведем ее.
-По сути это весь тот код, который ранее был заключен в свойстве template. Теперь изменим директиву answerList следующим образом:\\
 <code javascript>
-questApp.directive("answerList", function () {
+app.directive('fooBar', function () {
     return {
+        template: "<div>Hello world {{name}}</div>",
         link: function (scope, element, attrs) {
+            console.log('fooBar');
-            scope.data = scope[attrs["answerList"] ||attrs["source"]];
+            scope.name = "Sasha";
+        }
+    };
+});
+</code>
+{{ :angular:angularjs:custom_directive:directive35.png |}}
+В браузере у нас вывелось Hello world Sasha. Как это работает? У нашей директивы есть scope и в нем мы создали новую переменную name. И теперь эта переменная доступна нам в этом шаблоне, так как этот шаблон привязан к нашему scope.\\
+\\
+Давайте сделаем что-то более сложное. Создадим массив bookmarks с обьектами внутри.
+<code javascript>
+app.directive('fooBar', function () {
+    var bookmarks = [
+        {
+            id: 1,
+            name: 'AngularJS'
         },
-        restrict: "A",
+        {
-        templateUrl: "templates/answersTemplate.html"
+            id: 2,
-    }
+            name: 'EmberJS'
+        },
+        {
+            id: 3,
+            name: 'ReactJS'
+        }
+    ];
+    return {
+        template: "<div>Hello world {{name}}</div>",
+        link: function (scope, element, attrs) {
+            console.log('fooBar');
+            scope.name = "Sasha";
+        }
+    };
 });
 </code>
+Теперь давайте попробуем вывести эти значения в нашем шаблоне. Для начала нам нужно записать bookmarks в наш scope.
+<code javascript>
+app.directive('fooBar', function () {
+    var bookmarks = [
+        {
+            id: 1,
+            name: 'AngularJS'
+        },
+        {
+            id: 2,
+            name: 'EmberJS'
+        },
+        {
+            id: 3,
+            name: 'ReactJS'
+        }
+    ];
+    return {
+        template: "<div>Hello world {{name}}</div>",
+        link: function (scope, element, attrs) {
+            console.log('fooBar');
+            scope.name = "Sasha";
+            scope.myBookmarks = bookmarks;
+        }
+    };
+});
+</code>
+Дальше нам нужно в шаблоне создать ng-repeat.
+<code javascript>
+app.directive('fooBar', function () {
+    var bookmarks = [
+        {
+            id: 1,
+            name: 'AngularJS'
+        },
+        {
+            id: 2,
+            name: 'EmberJS'
+        },
+        {
+            id: 3,
+            name: 'ReactJS'
+        }
+    ];
+    return {
+        template: "<div ng-repeat='bookmark in myBookmarks'>{{bookmark.name}}</div>",
+        link: function (scope, element, attrs) {
+            console.log('fooBar');
+            scope.name = "Sasha";
+            scope.myBookmarks = bookmarks;
+        }
+    };
+});
+</code>
+{{ :angular:angularjs:custom_directive:directive36.png |}}
+Как мы видим, на экран вывелся список наших закладок. Как так получилось? Переменная myBookmarks находится внутри scope, поэтому она доступна в шаблоне. В template мы можем писать любой html текст и angular атрибуты, например, ng-repeat, что позволяет нам выводить цикл в директиве или любые другие значения, какие мы хотим.\\
+\\
+В следующих уроках мы посмотрим, как усложнить шаблоны и как вынести их за пределы директивы.
-Теперь вместо свойства template используется свойство **templateUrl**, которое позволяет установить адрес шаблона.

Инструменты пользователя

Инструменты сайта

Различия

Инструменты страницы