例如,我想创建一个类似于AngularJS实现“电子邮件”的自定义输入类型。
<input type="email" ng-model="user.email" />
我要创建的是这样的输入类型:
<input type="path" ng-model="page.path" />
关于如何做到这一点的任何想法?到目前为止,我仅能弄清楚如何实现自定义指令,其中“ path”是标记,属性或类的名称。
例如,我可以使它工作,但是它与其他表单字段 不一致 ,我真的希望它们看起来相同。
<input type="text" ng-model="page.path" path /> app.directive('path', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { ... } }; });
如果type属性设置为“ path”,则可以通过使用自定义逻辑创建输入指令来创建自己的输入type =“ path”。
我创建了一个简单的示例,将其替换\为/。该指令如下所示:
\
/
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](http://plnkr.co/edit/Zgi8Zw8oaQiSO6CvJMGY?p=preview)
更新 :已更改on,off要bind,unbind删除jQuery的依赖。示例已更新。
on
off
bind
unbind