{{tag>angular directive api}}

====== API для создания директив ======

<code javascript>
angular.module('app').controller('someDirective', function(){
  return {
    restrict: 'EA',
    replace: true,
    scope: true,
    controllerAs: 'something',
    controller: function () {

    },
    link: function ($scope, $element, $attrs) {

    },
    template: [
      '<div class="some-directive">',
        'My directive!',
      '</div>'
    ].join('');
  };  
});
</code>

===== restrict =====

Позволяет ограничивать использование директивы. Если мы хотим задавать директиву только через атрибуты, можно ограничить их ‘A’. Для ограничения работы директив в качестве элементов используется ‘E’, комментариев – ‘M’ и имён классов – ‘C’.

===== replace =====


Заменяет оригинальный элемент директивы. Если мы используем <some-directive></some-directive> и задаём replace: true, после создания страницы изначальный элемент будет заменён результатом работы скрипта.

===== scope =====


Позволяет наследовать $scope текущего или родительского контекста, в который входит директива. Можно создать изолированный $scope и передавать определённые значения, обычно через настраиваемые атрибуты.

===== controllerAs =====


Определяет имя контроллера внутри директивы. Если мы задаём controllerAs: 'something', то все ссылки на свойства контроллера будут выглядеть как something.myMethod()

===== controller =====


Захватить существующий контроллер или создать новый. Если MainCtrl уже существует, можно определить его как controller: 'MainCtrl'. Для сохранения инкапсуляции мы просто объявляем новый контроллер каждый раз через controller: function () {}. Функция обратного вызова контроллера должна обрабатывать изменения в ViewModel и общаться с Сервисами.

===== link =====


Функция link вызывается после того, как элемент компилируется и вставляется в DOM, поэтому здесь можно сделать что-то с контентом после компиляции или что-то, не связанное с Angular.

В контроллере мы не манипулируем DOM, но это возможно в функции link. Она также может вставлять $scope, корневой элемент шаблона $element и объект $attrs, содержащий все свойства элемента DOM, отражающего текущее состояние {{ }}. Внутри link можно привязать обработчики событий, определить плагины и даже вставить сервисы Angular.
