=====Пишем простую директиву в AngularJS=====

Директивы это киллер фича AngularJS. Они позволяют создавать многоразовые html елементы с своей собственной логикой внутри. \\
\\
Вообще директивы в ангуларе считаются одной из самых крутых фич. Они позволяют легко инкапсулировать кусок кода в какой-то компонент, чтобы его потом переиспользовать. Одним из примеров директивы может быть календарь, написанный на JQuery, который легко можно инкапсулировать внутри директивы и потом использовать в любом месте нашего приложения.\\
\\
Давайте рассмотрим как создаются директивы. Создадим div с атрибутом foo.


<code javascript>
<div foo></div>
</code>
Как вы понимаете, такого атрибута в природе нет. Теперь в нашем js скрипт напишем
<code javascript>
app.directive('foo', function () {
});
</code>

Директивы описываются специальным словом **directive**. Есть два варианта записи директив - **короткий и полный**. Короткий вариант, на самом деле, используется очень редко, но чтобы если вы его увидите, это вас не смущало, мы разберем сначала его.\\

<code javascript>
app.directive('foo', function () {
    return function (scope, element, attrs) {
    };
});
</code>
В функцию создания директивы передается три параметра:\\

  * **scope** - объект $scope, установленный в контроллере
  * **element** - элемент, к которому применяется директива
  * **attrs** - коллекция атрибутов в виде пары ключ-значение, где ключом является название атрибута

Что это такое? Scope - это область видимости данной директивы. Element - это DOM елемент нашей директивы, обернутый в JQlite и attrs - атрибуты этой директивы.\\
\\
Давайте посмотрим. Для начала выведем console.log.
<code javascript>
app.directive('foo', function () {
    return function (scope, element, attrs) {
        console.log('this is my directive');
    };
});
</code>

Если мы посмотрим в браузер, то увидим надпись //this is my directive//. 
{{ :angular:angularjs:custom_directive:directive15.png?600 |}}

Теперь давайте выведем внутри директивы текст foo.
<code javascript>
<div foo>foo</div>
</code>

Теперь мы видим наш DOM елемент на странице, но это уже не просто //div//, а директива. Вот этот атрибут //foo//, который мы задали, определяется этой директивой, и она срабатывает. То, что она срабатывает, мы видим, потому что у нас выводится //console.log//.\\

{{ :angular:angularjs:custom_directive:directive16.png?600 |}}

====свойство link====

Теперь давайте изменим описание директивы на полное, которым обычно используется. //Return// будет возвращать не функцию, а обьект. Внутри этого обьекта у него есть проперти //link//, который в себе содержит функцию, которую мы писали ранее.\\

<code javascript>
app.directive('foo', function () {
    return {
        link: function (scope, element, attrs) {
            console.log('this is my directive');
        }
    };
});
</code>

Что такое link? **Link в директиве - это функция, которая срабатывает уже после того, как DOM елемент отрисовался на странице.** Давайте теперь посмотрим, что такое scope, element и atts.

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

{{ :angular:angularjs:custom_directive:directive17.png?600 |}}

====Передаваемые параметры====

Если мы посмотрим в браузер, то увидим, что scope - это обьект, который является областью видимости нашей директивы. Element - это JQlite елемент, внутри него мы видим наш DOM елемент и attrs - это все атрибуты, которые есть на нашей директиве. Например, наш атрибут foo, который пустой, так как мы его не задали.\\
\\
Что мы можем сделать с этой директивой? Мы можем на нее применить какие-то JQuery изменения, например.
<code javascript>
app.directive('foo', function () {
    return {
        link: function (scope, element, attrs) {
            console.log('scope', scope);
            console.log('element', element);
            console.log('attrs', attrs);
            element.text('This is my magic directive');
        }
    };
});
</code>

Если мы посмотрим в браузер, то увидим текст This is my magic directive внутри директивы. Как мы видим, мы можем легко изменять елемент на что угодно после отрисовки.
{{ :angular:angularjs:custom_directive:directive18.png?600 |}}
Давайте попробуем повесить ивент click на нашу директиву, чтобы при нажатии на нее надпись менялась с foo на bar, и обратно.\\
\\
Для этого вешаем евент click и указывает функцию, которая будет происходить по клику.

<code javascript>
app.directive('foo', function () {
    return {
        link: function (scope, element, attrs) {
            element.on('click', function () {
                console.log('click');
            });
        }
    };
});
</code>

{{ :angular:angularjs:custom_directive:directive19.png?600 |}}

Как мы видим, обычный клик отлично срабатывает.\\
\\
Теперь давайте проверим, если текст елемента foo, то мы меняем его на bar.

<code javascript>
app.directive('foo', function () {
    return {
        link: function (scope, element, attrs) {
            element.on('click', function () {
                if (element.text() === 'foo') {
                    element.text('bar');
                } else {
                    element.text('foo');
                }
            });
        }
    };
});
</code>

Повторим еще раз. Мы повесили на елемент click. И проверяем условие при клике. Если текст елемента равняется foo - мы меняем его на текст bar, в другом случае в текст елемента записываем foo.\\
\\
Если мы посмотрим в браузер, то увидим, что все нормально работает. Вот так мы с вами создали простейшую директиву, которую можно переиспользовать сколько угодно раз в любой части нашего приложения.

<code javascript>
<!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.controller('firstCtrl', function ($scope) {

        });
        app.directive('foo', function () {
            return {
                link: function (scope, element, attrs) {
                    element.on('click', function () {
                        if (element.text() === 'foo') {
                            element.text('bar');
                        } else {
                            element.text('foo');
                        }
                    });
                }
            };
        });
    </script>
</head>
<body>
<div ng-controller="firstCtrl" class="container">
    <div foo>foo</div>
    <div foo>foo</div>
    <div foo>foo</div>
    <div foo>foo</div>
    <div foo>foo</div>
    <div foo>foo</div>
</div>
</body>
</html>
</code>
Мы можем сколько угодно раз нажимать на каждый елемент и он будет менять текст.

{{ :angular:angularjs:custom_directive:directive20.png?600 |}}