javascript - crear - directivas angular 6

Directiva angular con opciones predeterminadas

Question

Estoy empezando con angularjs, y estoy trabajando para convertir algunos viejos plugins de JQuery a directivas angulares. Me gustaría definir un conjunto de opciones predeterminadas para mi directiva (elemento), que puede anularse especificando el valor de la opción en un atributo.

He echado un vistazo a la manera en que otros lo han hecho, y en la biblioteca de ui- ui.bootstrap.pagination la ui.bootstrap.pagination parece hacer algo similar.

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

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

A continuación, se getAttributeValue una función de utilidad getAttributeValue 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 vinculación para leer atributos como

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

Esto parece una configuración bastante complicada para algo tan estándar como querer reemplazar un conjunto de valores predeterminados. ¿Hay otras maneras de hacer esto que sean comunes? ¿O es normal definir siempre una función de utilidad como getAttributeValue y analizar las opciones de esta manera? Me interesa saber qué estrategias diferentes tienen las personas para esta tarea común.

Además, como beneficio adicional, no estoy seguro de por qué se requiere el parámetro de interpolate .

Answer 1

Puede usar la función de compile - leer atributos si no están configurados - llenarlos con valores predeterminados.

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

Answer 2

Usa el =? bandera para la propiedad en el bloque de alcance de la directiva.

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