Использование директив в AngularJS: Теория и практика

| Пятница, 30 августа, 2013

Метки: AngularJS, Javascript Комментарии: 0

Создание директив (способ посложнее)

Существуют разные способы объявления директив. Разница в возвращаемом значении функции фабрики. Можно возвратить или Directive Definition Object (пример ниже), который определяет свойства директивы, или просто возвратить функцию postLink этого объекта (все остальные свойства будут иметь значения по умолчанию)

Ниже пример директивы, объявленной с Directive Definition Object:

var myModule = angular.module(...);
 
myModule.directive('directiveName', function factory(injectables) {
  var directiveDefinitionObject = {
    priority: 0,
    template: '<div></div>', // or // function(tElement, tAttrs) { ... },
    // or
    // templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... },
    replace: false,
    transclude: false,
    restrict: 'A',
    scope: false,
    controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
    require: 'siblingDirectiveName', // or 
     // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
     // or
     // return function postLink( ... ) { ... }
    },
    // or
    // link: {
    //  pre: function preLink(scope, iElement, iAttrs, controller) { ... },
    //  post: function postLink(scope, iElement, iAttrs, controller) { ... }
    // }
    // or
    // link: function postLink( ... ) { ... }
  };
  return directiveDefinitionObject;
});

В большинстве случаев не нужен такой тщательный контроль над директивой, и вышеприведенный пример может быть упрощен. Можно возвратить Directive Definition Object и инициализировать только свойство 'link', а остальные свойства оставить заданными по умолчанию.

Таким образом пример выше можно упростить так:

var myModule = angular.module(...);
 
myModule.directive('directiveName', function factory(injectables) {
  var directiveDefinitionObject = {
    link: function postLink(scope, iElement, iAttrs) { ... }
  };
  return directiveDefinitionObject;
  // or
  // return function postLink(scope, iElement, iAttrs) { ... }
});

Метод фабрики

Метод фабрики отвечает за создание директивы. Он вызывается только один раз, когда компилятор встречает с директиву первый раз. В этом методе можно задать любую инициализацию. Метод вызывается с помощью $injector.invoke, и это значит что метод полностью соблюдает правила инжектирования/вставки объектов.