Angularjs - Reglerfunktion ungültig Zeichen von der Eingabe filtern Zeichen nicht gelöscht, bis ein gültiges Zeichen eingegeben

Question

ich eine JSFiddle der Ausgabe erstellt haben, ich erlebe hier: http://jsfiddle.net/9qxFK/4/

ich ein Eingabefeld, das ich Ich möchte nur Kleinbuchstaben, Zahlen und Bindestriche zulassen (dieses Feld wird in einer URL verwendet).

Ich habe folgendes Angularjs Controller-Methode, um dies zu tun:

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

Ungültige Zeichen nur entfernt werden, wenn ein gültiges Zeichen nach einem ungültigen Zeichen eingegeben wird.

Kann mir jemand sagen, warum das nicht funktioniert?

Danke, Scott

Answer 1

Statt dass an der Steuer tun sollten Sie eine Richtlinie wie diese verwendet werden:

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

Und es dann wie folgt auf Ihrem input verwenden:

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

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