Làm cách nào để tạo loại đầu vào tùy chỉnh?

Question

Tôi muốn tạo kiểu nhập tùy chỉnh tương tự như cách mà AngularJS triển khai "email", ví dụ.

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

Những gì tôi muốn tạo ra là một loại đầu vào như thế này:

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

Bất kỳ ý tưởng về cách thức này có thể được thực hiện? Cho đến nay, tôi chỉ có thể tìm ra cách thực hiện các chỉ thị tùy chỉnh trong đó 'đường dẫn' là tên của thẻ, thuộc tính hoặc lớp.

Ví dụ: tôi có thể làm việc này nhưng đó là không nhất quán với các trường biểu mẫu khác và tôi thực sự muốn chúng trông giống nhau.

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

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

Answer 1

Bạn có thể tạo riêng input type = "đường dẫn" của bạn bằng cách tạo ra một chỉ thị đầu vào với logic tùy chỉnh nếu thuộc tính type được đặt thành "con đường".

Tôi đã tạo một ví dụ đơn giản chỉ thay thế \ bằng /. Chỉ thị này trông như thế này:

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

Cập nhật: Thay đổi on, off-bind, unbind để loại bỏ jQuery phụ thuộc. Đã cập nhật ví dụ.

Answer 2

Một giải pháp thay thế có thể đạt được bằng cách sử dụng thuộc tính $parsers của ngModelController. Thuộc tính này đại diện cho một chuỗi các trình phân tích cú pháp được áp dụng cho giá trị của thành phần đầu vào trước khi chuyển chúng tới xác nhận hợp lệ (và cuối cùng gán chúng cho mô hình). Với điều này, các giải pháp có thể được viết như sau:

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, '/'); 
      }); 
     } 
    }; 
}); 

Lưu ý rằng có một tài sản $formatters mà là một đường ống dẫn của trình định dạng mà chuyển đổi một giá trị mô hình thành giá trị hiển thị trong đầu vào.

Xem here dành cho người plunker.

Answer 3

Xét chức năng biên dịch là người đầu tiên trong dòng, điều đó sẽ không thể tốt hơn với:

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