Directive AngularJS avec options par défaut

Je commence juste avec angularjs et je travaille sur la conversion de quelques anciens plugins JQuery en directives Angular. Je voudrais définir un ensemble d'options par défaut pour ma directive (élément), qui peut être remplacée en spécifiant la valeur d'option dans un attribut.

J'ai jeté un coup d'œil à la manière dont d'autres ont fait cela, et dans la bibliothèque angular-ui , ui.bootstrap.pagination semble faire quelque chose de similaire.

Tout d'abord, toutes les options par défaut sont définies dans un objet constant:

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

Ensuite, une getAttributeValuefonction utilitaire est attachée au contrôleur de directive:

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

Enfin, cela est utilisé dans la fonction de liaison pour lire les attributs comme

.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);
        ...
    }
});

Cela semble être une configuration assez compliquée pour quelque chose d'aussi standard que de vouloir remplacer un ensemble de valeurs par défaut. Existe-t-il d'autres moyens de le faire qui sont courants? Ou est-il normal de toujours définir une fonction utilitaire telle que getAttributeValueet analyser les options de cette manière? Je suis intéressé de savoir quelles sont les différentes stratégies des gens pour cette tâche commune.

De plus, en prime, je ne sais pas pourquoi le interpolateparamètre est requis.

Vous pouvez utiliser la compilefonction - lire les attributs s'ils ne sont pas définis - les remplir avec des valeurs par défaut.

.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; }
    },
        ...
  }
});

Utilisez l' =?indicateur de la propriété dans le bloc de portée de la directive.

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

J'utilise AngularJS v1.5.10 et j'ai trouvé que la preLinkfonction de compilation fonctionnait plutôt bien pour définir les valeurs d'attribut par défaut.

Juste un rappel:

• attrscontient les valeurs d'attribut DOM brutes qui sont toujours des undefinedchaînes ou des chaînes.
• scopecontient (entre autres) les valeurs d'attribut DOM analysées conformément à la spécification de portée d'isolat fournie ( =/ </ @/ etc.).

Extrait abrégé:

.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: ...
  }
});