如何創建自定義輸入類型？

Question

我想創建一個類似於AngularJS實現「email」的自定義輸入類型，例如。

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

我想創建一個輸入型是這樣的：

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

這是如何得來的任何想法？到目前爲止，我只能弄清楚如何實現自定義指令，其中「路徑」是標記，屬性或類的名稱。

例如，我可以得到這個工作，但它是不一致與其他表單字段，我真的很喜歡他們看起來一樣。

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

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

Answer 1

您可以創建自己的輸入型=「路徑」的，如果該類型屬性設置爲「路徑」創建自定義邏輯輸入指令。

我創建了一個簡單的例子，它簡單地用/代替\。該指令是這樣的：

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

更新：改變on，off到bind，unbind刪除jQuery的依賴。示例已更新。

Answer 2

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

注意，還有另一種屬性$formatters其爲變換模型值到在該輸入顯示的值格式化的一個管道。

請參閱here爲掠奪者。

Answer 3

考慮編譯功能是排在第一位，豈不是更好：

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