Различия

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

--- angular:angularjs:custom_directive:templates [2020/06/17 10:41]
werwolf
+++ angular:angularjs:custom_directive:templates [2023/01/12 12:18] (текущий)
@@ Строка 33: / Строка 33: @@
 {{ :angular:angularjs:custom_directive:directive33.png |}}
-Как мы видим темплейтом является то, что написано внутри директивы.
+Как мы видим темплейтом является то, что написано внутри директивы.\\
+Темплейты - это не просто строки. Сюда можно написать разметку, например, div.
+<code javascript>
+app.directive('fooBar', function () {
+    return {
+        template: "<div>Hello world</div>",
+        link: function (scope, element, attrs) {
+            console.log('fooBar');
+        }
+    };
+});
+</code>
+У нас внутри директивы отрендерился div с текстом Hello world внутри. В шаблонах можно написать любую разметку с классами и какими-то своими стилями.
+{{ :angular:angularjs:custom_directive:directive34.png |}}
+Теперь давайте попробуем добавить переменную. Для этого в link функции опишем переменную scope.name и выведем ее.
+<code javascript>
+app.directive('fooBar', function () {
+    return {
+        template: "<div>Hello world {{name}}</div>",
+        link: function (scope, element, attrs) {
+            console.log('fooBar');
+            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'
+        },
+        {
+            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, что позволяет нам выводить цикл в директиве или любые другие значения, какие мы хотим.\\
+\\
+В следующих уроках мы посмотрим, как усложнить шаблоны и как вынести их за пределы директивы.

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

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

Различия

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