Directiva AngularJS con opciones predeterminadas

Estoy empezando con AngularJS y estoy trabajando para convertir algunos complementos antiguos de jQuery en directivas angulares. Me gustaría definir un conjunto de opciones predeterminadas para mi directiva (elemento), que se puede anular especificando el valor de la opción en un atributo.

He echado un vistazo a la forma en que otros han hecho esto, y en el interfaz de usuario angular biblioteca la ui.bootstrap.paginación parece hacer algo similar.

Primero, todas las opciones predeterminadas se definen en un objeto constante:

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

Entonces un getAttributeValue La función de utilidad se adjunta al controlador de directivas:

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

Finalmente, esto se usa en la función de enlace para leer atributos como

.directive('paginación', ['$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);
        ...
    }
});

This seems like a rather complicated setup for something as standard as wanting to replace a set of default values. Are there any other ways to do this that are common? Or is it normal to always define a utility function such as getAttributeValue and parse options in this way? I’m interested to find out what different strategies people have for this common task.

Also, as a bonus, I’m not clear why the interpolate parameter is required.

Use the =? flag for the property in the scope block of the directive.

angular.module('myApp',[]) .directive('myDirective', function(){ return { template: 'hello {{name}}', scope: { // use =? para indicar la propiedad como nombre opcional: '=?' }, controller: function ($scope){ // comprueba si se definió. Si no, establece un $scope.name predeterminado = angular.isDefined($scope.name) ? $scope.name : 'default name'; } } });

Puedes usar compile función – leer atributos si no están configurados – llenarlos con valores predeterminados.

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

Estoy usando AngularJS v1.5.10 y encontré el preLink función de compilación funcionar bastante bien para establecer valores de atributo predeterminados.

Simplemente un recordatorio:

• attrs sostiene el crudo Valores de atributo DOM que siempre son undefined o cuerdas.
• scope contiene (entre otras cosas) los valores de los atributos DOM analizado de acuerdo con la especificación de alcance aislada proporcionada (= / < / @ / etc.).

Fragmento abreviado:

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