AngularJS директива з опціями за замовчуванням

Я лише починаю з angularjs і працюю над перетворенням декількох старих плагінів JQuery в директиви Angular. Я хотів би визначити набір параметрів за замовчуванням для моєї директиви (елемента), яку можна змінити, вказавши значення параметра в атрибуті.

Я роздивився , як це робили інші, і в бібліотеці з кутом ui ui.bootstrap.pagination, здається, робить щось подібне.

Спочатку всі параметри за замовчуванням визначаються в постійному об'єкті:

.constant('paginationConfig', {
  itemsPerPage: 10,
  boundaryLinks: false,
  ...
})

Потім getAttributeValueфункція утиліти приєднується до контролера директиви:

this.getAttributeValue = function(attribute, defaultValue, interpolate) {
    return (angular.isDefined(attribute) ?
            (interpolate ? $interpolate(attribute)($scope.$parent) :
                           $scope.$parent.$eval(attribute)) : defaultValue);
};

Нарешті, це використовується у функції зв’язку для читання в атрибутах як

.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
    ...
    controller: 'PaginationController',
    link: function(scope, element, attrs, paginationCtrl) {
        var boundaryLinks = paginationCtrl.getAttributeValue(attrs.boundaryLinks,  config.boundaryLinks);
        var firstText = paginationCtrl.getAttributeValue(attrs.firstText, config.firstText, true);
        ...
    }
});

Це здається досить складним налаштуванням для чогось такого стандартного, як бажання замінити набір значень за замовчуванням. Чи є якісь інші способи зробити це загальними? Або нормально завжди визначати функцію утиліти, наприклад getAttributeValueпараметри розбору та таким чином? Мені цікаво дізнатися, які різні стратегії мають люди для цього спільного завдання.

Також як бонус мені не зрозуміло, для чого interpolateпотрібен параметр.

Ви можете використовувати compileфункції атрибутів для читання, якщо вони не встановлені - заповнити їх значеннями за замовчуванням.

.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
    ...
    controller: 'PaginationController',
    compile: function(element, attrs){
       if (!attrs.attrOne) { attrs.attrOne = 'default value'; }
       if (!attrs.attrTwo) { attrs.attrTwo = 42; }
    },
        ...
  }
});

Використовуйте =?прапор для властивості у блоці сфери дії директиви.

angular.module('myApp',[])
  .directive('myDirective', function(){
    return {
      template: 'hello {{name}}',
      scope: {
        // use the =? to denote the property as optional
        name: '=?'
      },
      controller: function($scope){
        // check if it was defined.  If not - set a default
        $scope.name = angular.isDefined($scope.name) ? $scope.name : 'default name';
      }
    }
  });

Я використовую AngularJS v1.5.10 і виявив, що preLinkфункція компіляції працює досить добре для встановлення значень атрибутів за замовчуванням.

Просто нагадування:

• attrsтримає сирого значення атрибутів DOM , які завжди або undefinedабо рядки.
• scopeмістить (серед іншого) значення атрибутів DOM, розібрані відповідно до наданої специфікації області ізоляту ( =/ </@ / тощо).

Скорочений фрагмент:

.directive('myCustomToggle', function () {
  return {
    restrict: 'E',
    replace: true,
    require: 'ngModel',
    transclude: true,
    scope: {
      ngModel: '=',
      ngModelOptions: '<?',
      ngTrueValue: '<?',
      ngFalseValue: '<?',
    },
    link: {
      pre: function preLink(scope, element, attrs, ctrl) {
        // defaults for optional attributes
        scope.ngTrueValue = attrs.ngTrueValue !== undefined
          ? scope.ngTrueValue
          : true;
        scope.ngFalseValue = attrs.ngFalseValue !== undefined
          ? scope.ngFalseValue
          : false;
        scope.ngModelOptions = attrs.ngModelOptions !== undefined
          ? scope.ngModelOptions
          : {};
      },
      post: function postLink(scope, element, attrs, ctrl) {
        ...
        function updateModel(disable) {
          // flip model value
          var newValue = disable
            ? scope.ngFalseValue
            : scope.ngTrueValue;
          // assign it to the view
          ctrl.$setViewValue(newValue);
          ctrl.$render();
        }
        ...
    },
    template: ...
  }
});