javascript 如何创建自定义输入类型？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14736469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a custom input type?
提问by JamesOR
I would like to create a custom input type similar to the way AngularJS implements "email", for example.
例如，我想创建一个类似于 AngularJS 实现“电子邮件”的方式的自定义输入类型。
<input type="email" ng-model="user.email" />
What I would like to create is an input type like this:
我想创建的是这样的输入类型：
<input type="path" ng-model="page.path" />
Any ideas on how this can be accomplished? So far, I've only been able to figure out how to implement custom directives where 'path' is the name of the tag, attribute or class.
关于如何实现这一点的任何想法？到目前为止，我只能弄清楚如何实现自定义指令，其中“路径”是标签、属性或类的名称。
For example, I can get this to work but it is inconsistentwith the other form fields and I'd really like them to look the same.
例如，我可以让它工作，但它与其他表单字段不一致，我真的希望它们看起来一样。
<input type="text" ng-model="page.path" path />
app.directive('path', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) { ... }
};
});
回答by Martin
You can create your own input type="path" by creating an input directive with custom logic if the type attribute is set to "path".
如果 type 属性设置为“path”，您可以通过使用自定义逻辑创建输入指令来创建自己的输入 type="path"。
I've created a simple example that simply replaces \with /. The directive looks like this:
我创建了一个简单的例子，它简单地替换\为/. 该指令如下所示：
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);
});
});
}
};
});
Update: Changed on, offto bind, unbindto remove jQuery dependency. Example updated.
更新：已更改on，off要bind，unbind删除jQuery的依赖。示例已更新。
回答by widmoser
An alternative solution can be achieved by using the $parsersproperty of the ngModelController. This property represents a chain of parsers that are applied to the value of the input component before passing them to validation (and eventually assigning them to the model). With this, the solution can be written as:
可以通过使用ngModelController的$parsers属性来实现替代解决方案。此属性表示在将输入组件的值传递给验证（并最终将它们分配给模型）之前应用于输入组件的值的解析器链。有了这个，解决方案可以写成：
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, '/');
});
}
};
});
Note that there is another property $formatterswhich is a pipeline of formatters that transform a model value into the value displayed in the input.
请注意，还有另一个属性$formatters是格式化程序管道，可将模型值转换为输入中显示的值。
See herefor the plunker.
看到这里的plunker。
回答by Chris2402
Considering compile function is the first in line, would it not be better with:
考虑到 compile 函数是第一个，它会不会更好：
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);
});
});
}
}
};
});
