Очень часто в приложении нам хочется инкапсулировать кусок шаблона с какой-то логикой, для того, чтобы его потом повторно использовать. В этом нам помогут директивы с их шаблонами и линк функцией.

Давайте для начала создадим директиву.

    <foo-bar></foo-bar>

И опишем ее

    <foo-bar></foo-bar>

Напишем link функцию и выведем в консоль fooBar, чтобы проверить, что наша директива срабатывает. Если мы посмотрим в браузер, то увидим в консоли fooBar.

У директивы есть проперти, которое называется template. Давайте напишем template Hello world.0

app.directive('fooBar', function () {
    return {
        template: "Hello world",
        link: function (scope, element, attrs) {
            console.log('fooBar');
        }
    };
});

В браузере мы увидим Hello world внутри нашей директивы.

Как мы видим темплейтом является то, что написано внутри директивы.