如何创建自定义输入类型？

Question

例如，我想创建一个类似于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) { ... }
  };
});

Answer 1

如果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的依赖。示例已更新。