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

Anonymous (anonymous@undisclosed.example.com) — 2016-01-09T13:54:32+00:00

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

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

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.

Библиотека знаний - java-script:angularjs:diretive

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

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

restrict

replace

scope

controllerAs

controller

link