javascript - bootstrap - ¿Cómo crear un tipo de entrada personalizado?

input text parameters

Question

Me gustaría crear un tipo de entrada personalizado similar a la forma en que AngularJS implementa el "correo electrónico", por ejemplo.

<input type="email" ng-model="user.email" />

Lo que me gustaría crear es un tipo de entrada como este:

<input type="path" ng-model="page.path" />

¿Alguna idea sobre cómo se puede lograr esto? Hasta ahora, solo he podido descubrir cómo implementar directivas personalizadas donde "ruta" es el nombre de la etiqueta, atributo o clase.

Por ejemplo, puedo hacer que esto funcione, pero es inconsistente con los otros campos de formulario y realmente me gustaría que se vean igual.

<input type="text" ng-model="page.path" path />

app.directive(''path'', function() {
  return {
    require: ''ngModel'',
    link: function(scope, elm, attrs, ctrl) { ... }
  };
});

Answer 1

Puede crear su propio tipo de entrada = "ruta" creando una directiva de entrada con lógica personalizada si el atributo de tipo se establece en "ruta".

He creado un ejemplo simple que simplemente reemplaza / con / . La directiva se ve así:

module.directive(''input'', function() {
    return {
        restrict: ''E'',
        require: ''ngModel'',
        link: function (scope, element, attr, ngModel) {
          if (attr.type !== ''path'') return;

          // Override the input event and add custom ''path'' logic
          element.unbind(''input'');
          element.bind(''input'', function () {
            var path = this.value.replace(////g, ''/'');

            scope.$apply(function () {
              ngModel.$setViewValue(path);
            });
          });
        }
    };
});

Example

Actualización : se ha cambiado, off para bind , unbind para eliminar la dependencia jQuery Ejemplo actualizado.

Answer 2

Se puede lograr una solución alternativa utilizando la propiedad $parsers de ngModelController . Esta propiedad representa una cadena de analizadores que se aplican al valor del componente de entrada antes de pasarlos a la validación (y, finalmente, asignarlos al modelo). Con esto, la solución se puede escribir como:

module.directive(''input'', function() {
    return {
        restrict: ''E'',
        require: ''ngModel'',
        link: function (scope, element, attr, ngModel) {
          if (attr.type !== ''path'') return;

          ngModel.$parsers.push(function(v) {
            return v.replace(////g, ''/'');
          });
        }
    };
});

Tenga en cuenta que hay otra propiedad $formatters que es una tubería de formateadores que transforman un valor de modelo en el valor que se muestra en la entrada.

Vea here para el plunker.

Answer 3

Teniendo en cuenta que la función de compilación es la primera en línea, ¿no sería mejor con:

module.directive(''input'', function() {
  return {
    restrict: ''E'',
    require: ''ngModel'',
    compile: function Compile(tElement, tAttrs) {
      if (tAttrs.type !== ''path'') return;

      return function PostLink(scope, element, attr, ngModel) {
        // Override the input event and add custom ''path'' logic
        element.unbind(''input'');
        element.bind(''input'', function () {
          var path = this.value.replace(////g, ''/'');

          scope.$apply(function () {
            ngModel.$setViewValue(path);
          });
        });
      }
    }
  };
});