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

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

    <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 внутри нашей директивы.

Как мы видим темплейтом является то, что написано внутри директивы.
Темплейты - это не просто строки. Сюда можно написать разметку, например, div.

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

У нас внутри директивы отрендерился div с текстом Hello world внутри. В шаблонах можно написать любую разметку с классами и какими-то своими стилями.

Теперь давайте попробуем добавить переменную. Для этого в link функции опишем переменную scope.name и выведем ее.

app.directive('fooBar', function () {
    return {
        template: "<div>Hello world {{name}}</div>",
        link: function (scope, element, attrs) {
            console.log('fooBar');
            scope.name = "Sasha";
        }
    };
});

В браузере у нас вывелось Hello world Sasha. Как это работает? У нашей директивы есть scope и в нем мы создали новую переменную name. И теперь эта переменная доступна нам в этом шаблоне, так как этот шаблон привязан к нашему scope.

Давайте сделаем что-то более сложное. Создадим массив bookmarks с обьектами внутри.

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";
        }
    };
});

Теперь давайте попробуем вывести эти значения в нашем шаблоне. Для начала нам нужно записать bookmarks в наш scope.

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;
        }
    };
});

Дальше нам нужно в шаблоне создать ng-repeat.

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;
        }
    };
});

Как мы видим, на экран вывелся список наших закладок. Как так получилось? Переменная myBookmarks находится внутри scope, поэтому она доступна в шаблоне. В template мы можем писать любой html текст и angular атрибуты, например, ng-repeat, что позволяет нам выводить цикл в директиве или любые другие значения, какие мы хотим.

В следующих уроках мы посмотрим, как усложнить шаблоны и как вынести их за пределы директивы.