Angular.js - chức năng điều khiển để lọc ký tự không hợp lệ từ đầu vào sẽ không xóa ký tự cho đến khi một char hợp lệ được nhập

Question

tôi đã tạo ra một JSFiddle về vấn đề này tôi đang trải qua ở đây: http://jsfiddle.net/9qxFK/4/

Tôi có một lĩnh vực đầu vào mà tôi chỉ muốn cho phép chữ thường, số và dấu gạch ngang (trường này sẽ được sử dụng trong URL).

tôi có phương pháp điều khiển angular.js sau đây để làm điều này:

$scope.auto_slug = function() { 
    $scope.slug = $scope.slug.toLowerCase().replace(/[^a-z0-9\-\s]/g, '').replace(/\s+/g, '-'); 
}; 

ký tự không hợp lệ chỉ được gỡ bỏ khi một ký tự hợp lệ được gõ sau khi một nhân vật không hợp lệ.

Ai có thể cho tôi biết lý do tại sao điều này không hiệu quả?

Cảm ơn, Scott

Answer 1

Thay vì làm điều đó trên Controller bạn nên sử dụng một chỉ thị như thế này:

app.directive('restrict', function($parse) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, iElement, iAttrs, controller) { 
      scope.$watch(iAttrs.ngModel, function(value) { 
       if (!value) { 
        return; 
       } 
       $parse(iAttrs.ngModel).assign(scope, value.toLowerCase().replace(new RegExp(iAttrs.restrict, 'g'), '').replace(/\s+/g, '-')); 
      }); 
     } 
    } 
});​ 

Và sau đó sử dụng nó trên input của bạn như thế này:

<input restrict="[^a-z0-9\-\s]" data-ng-model="slug" ...> 

jsFiddle: http://jsfiddle.net/9qxFK/5/