Вторник, 30 мая, 2017

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

комментарии: 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, и это значит что метод полностью соблюдает правила инжектирования/вставки объектов.

Комментарии

 

Добавить комментарий

Войти через Twitter Войти через Facebook Войти через ВКонтакте Войти через Github Войти через Google Войти через LinkedIn

Copyright © 2013 All Rights Reserved for CodeHint.ru      Powered by Windows Azure