angular:angularjs:custom_directive:templates []

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
===== Шаблоны в директивах AngularJS =====

Очень часто в приложении нам хочется инкапсулировать кусок шаблона с какой-то логикой, для того, чтобы его потом повторно использовать. В этом нам помогут директивы с их шаблонами и линк функцией.\\
\\
Давайте для начала создадим директиву.
<code javascript>
    <foo-bar></foo-bar>
</code>
И опишем ее
<code javascript>
    <foo-bar></foo-bar>
</code>

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

{{ :angular:angularjs:custom_directive:directive32.png |}}

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

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

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

{{ :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, что позволяет нам выводить цикл в директиве или любые другие значения, какие мы хотим.\\
\\
В следующих уроках мы посмотрим, как усложнить шаблоны и как вынести их за пределы директивы.
Инструменты пользователя

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

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