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