angular:angularjs:custom_directive:transclude []

Это старая версия документа!

Transclude в директивах AngularJS

Transclude - это возможность использовать первоначальное содержимое директивы в любом месте нашего шаблона.

Давайте в файле index.html создадим дерективу foo-bar и опишем ее:

<!DOCTYPE html>
<html lang="en" ng-app='app'>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  <script>
        var app = angular.module('app', []);
        app.directive('fooBar', function () {
            return {
                restrict: 'E',
                link: function (scope, element, attrs) {
                    console.log('This is my super directive');
                }
            }
        });
    </script>
</head>
<body>
<foo-bar>Foo bar</foo-bar>
</body>
</html>

В коде, представленном выше, мы возвращаем объект, который указывает, что директива наша будет работать как елемент и выводим в console.log строку. Давайте убедимся, что все работает и откроем нашу страницу в браузере. Как видим, в инструментах для разработчика, строка отображается.

Далее добавляем шаблон. Для этого в описании директивы добавляем следующий код:

var app = angular.module('app', []);
 
app.directive('fooBar', function () {
    return {
        restrict: 'E',
        template: 'This is my super directive',
        link: function (scope, element, attrs) {
            console.log('This is my super directive');
        }
    }
});

Теперь в браузере мы видим, что содержимое директивы заменилось на текст шаблона. Возникает вопрос: «Как сделать так, чтобы текст шаблона не пропадал и при этом мы могли его использовать?». Для этого был создан transclude. Transclude - это еще одно property директивы, в котором мы укажем true:

      var app = angular.module('app', []);
 
      app.directive('fooBar', function () {
          return {
              restrict: 'E',
              transclude: true,
              template: 'This is my super directive',
              link: function (scope, element, attrs) {
                  console.log('This is my super directive');
              }
          }
      });

После этого, в шаблоне, мы можем дописать следующий код:

var app = angular.module('app', []);
 
app.directive('fooBar', function () {
    return {
        restrict: 'E',
        template: 'This is my super directive <div ng-transclude></div>',
        link: function (scope, element, attrs) {
            console.log('This is my super directive');
        }
    }
});

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

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

Боковая панель

Transclude в директивах AngularJS

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