Javascript Angular.js-用于从输入中筛选无效字符的控制器函数在输入有效字符之前不会删除字符

我已经创建了一个我在这里遇到的问题：

我有一个只允许小写字母、数字和连字符的输入字段（该字段将在URL中使用）

为此，我使用以下angular.js控制器方法：

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

仅当在无效字符后键入有效字符时，才会删除无效字符

有人能告诉我为什么这不起作用吗

---

谢谢，Scott

您不应该在控制器上这样做，而应该使用如下指令：

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

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

然后在

输入中使用它，如下所示：

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

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



jsFiddle：