Различия

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

--- angular:angularjs:custom_directive:transclude [2020/06/14 13:36]
werwolf
+++ angular:angularjs:custom_directive:transclude [2023/01/12 12:18] (текущий)
@@ Строка 67: / Строка 67: @@
 После этого, в шаблоне, мы можем дописать следующий код:
+<code javascript>
+var app = angular.module('app', []);
+        app.directive('fooBar', function () {
+            return {
+                restrict: 'E',
+                transclude: true,
+                template: 'This is my super directive <div ng-transclude></div>',
+                link: function (scope, element, attrs) {
+                    console.log('This is my super directive');
+                }
+            }
+        });
+</code>
+Обновим страницу браузера. Теперь, как мы видим, к нашему шаблону - This is my super directive - добавился ng-transclude, который мы описали и внутри данного тега содержится тот текст, который мы изначально написали в директиве.
+{{ :angular:angularjs:custom_directive:directive23.png?600 |}}
+Повторим: для того, чтобы вывести первоначальное содержимое директивы в шаблоне - мы в описании директивы, в шаблоне, прописываем следующий код: \\
+\\
+<code javascript>
+<div ng-transclude></div>
+</code>
+Это стандартная директива Ангулара, которая позволяет вставить первоначальный текст в шаблон. Точно также мы можем использовать не div в качестве атрибута, а сам элемент ng-transclude. Тогда код будет выглядеть следующим образом:
 <code javascript>
 var app = angular.module('app', []);
@@ Строка 73: / Строка 100: @@
     return {
         restrict: 'E',
-        template: 'This is my super directive <div ng-transclude></div>',
+        transclude:true,
+        template: 'This is my super directive <ng-transclude></ng-transclude>',
         link: function (scope, element, attrs) {
             console.log('This is my super directive');
@@ Строка 80: / Строка 108: @@
 });
 </code>
+Наш transclude точно также работает.
+Теперь усложним задачу. Обернем нашу диррективу в ng-controller и в директиве передадим, например, дополнительно некую переменную name. Для этого в файле index.html, после тега body, прописываем (не забываем подключить предварительно все необходимы для работы скрипты):
+<code javascript>
+<div ng-controller="firstCtrl">
+    <foo-bar>This is {{name}}</foo-bar>
+</div>
+</code>
+Давайте опишем переменную name в контроллере. Для этого создадим, собственно, сам контроллер app.controller, в который передаем два параметра - название контроллера и функцию с $scope. Внутри самого контроллера присваиваем $scope.name = 'Bob'.
+Смотрим, что у нас вышло.
+{{ :angular:angularjs:custom_directive:directive24.png?600 |}}
+Теперь у нас работает не только текст внутри директивы, но также отображаются и все переменные.
+====Transclude - это функция====
+Уберем ng-transclude, который мы добаили в шаблон, и посмотрим на функцию трансклуда в линк функции. Как это сделать? Мы имеем три параметра внутри линк-функции - это scope, element и attrs. Четвертым параметром передаем контроллер, а пятым - transclude. Именно этот пятый параметр нас сегодня и интересует.\\
+\\
+Что это такое? Transclude - это функция, которая первым параметром принимает scope, а вторым - функцию. Первый аргумент данной функции - clone, второй - scope. Давайте выведем console.log и посмотрим, что мы написали. Полный код:
+<code javascript>
+        var app = angular.module('app', []);
+        app.controller('firstCtrl', function ($scope) {
+            $scope.name = 'Bob';
+        });
+        app.directive('fooBar', function () {
+            return {
+                restrict: 'E',
+                transclude:true,
+                template: 'This is my super directive',
+                link: function (scope, element, attrs, ctrl, transclude) {
+                    console.log('This is my super directive');
+                    transclude(scope, function(clone, scope) {
+                        console.log('!', clone, scope);
+                    });
+                }
+            }
+        });
+</code>
+Обновляем страницу, смотрим в консоль.
+{{ :angular:angularjs:custom_directive:directive25.png |}}
+Видим, что первый параметр **clone - передает span**, который будет непосредственно добавляться в конец нашего шаблона. то есть по факту - это //This is {{name}}//. **Вторым параметром идет scope** клонируемого элемента, в данном случае - это все тот же //This is {{name}}.//
+\\
+Теперь добавим element - им будет выступать наша дирректива:
+<code javascript>
+   var app = angular.module('app', []);
+        app.controller('firstCtrl', function ($scope) {
+            $scope.name = 'Bob';
+        });
+        app.directive('fooBar', function () {
+            return {
+                restrict: 'E',
+                transclude:true,
+                template: 'This is my super directive',
+                link: function (scope, element, attrs, ctrl, transclude) {
+                    console.log('This is my super directive');
+                    transclude(scope, function(clone, scope) {
+                        console.log('!', clone, scope);
+                        element.append(clone);
+                    });
+                }
+            }
+        });
+</code>
+Что мы сейчас сделали? Мы взяли наш элемент - это шаблон 'This is my super directive', который будет добавляться в самый конец. Clone - это как раз наш span, который содердит в себе This is {{name}}.\\
+\\
+Давайте посмотрим, что у нас получилось. Все работает в точности так, как и работало. У нас есть дирректива, также шаблон 'This is my super directive', и добавился span с содержимым 'This is Bob'.
+{{ :angular:angularjs:custom_directive:directive26.png?600 |}}
+Когда мы используем transclude в виде функции - мы можем легко оперировать теми значениями, которые мы хотим добавить в конец шаблона, и таким же путем мы можем получить scope элемента.

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

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

Различия

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