如何让textarea不允许或忽略AngularJS中的linebreak/newline/return

Question

在angularjs中是否可以忽略或不允许textarea中的换行符？该文本用于pdf生成器,我不希望用户能够键入换行符然后在pdf中看不到它.我宁愿一起忽略返回键.

<textarea ng-model="model.text"></textarea>

Answer 1

在您的控制器/指令中,如果运行正则表达式以删除所有出现的'\n' $scope.model.text,则应该得到一个没有换行符的普通字符串.

你可以参考这个答案来做到这一点:如何在JavaScript中替换所有出现的字符串？

如果您甚至不希望文本区域有任何换行符,您可以在观察者中添加上述逻辑,如下所示:

$scope.$watch('model.text', function(){
  $scope.model.text = $scope.model.text.replace(/\n/g, '');
})

Answer 2

使用GísliKonráð和midhunsezhi答案,我能够制定一个符合我想要的指令.信用应该真正归功于他们.

.directive('noNewLines', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attributes, ngModelController) {
            var model = attributes.ngModel;
            var regex = new RegExp("^[^\n\r]*$");

            // $parsers handle input from the element where the
            // ng-model directive is set
            ngModelController.$parsers.unshift(function(value) {
                if(!value) return value;
                var modelValue = ngModelController.$modelValue;
                var isValid = regex.test(value);
                ngModelController.$setValidity('Does not match pattern', isValid);

                var transformedInput = value.replace(/[\n\r]/g, '');
                if(transformedInput !== value) {
                    ngModelController.$setViewValue(transformedInput);
                    ngModelController.$render();
                }
               return transformedInput;
            });

            // $formatters handle when the model is changed and 
            // the element needs to be updated
            ngModelController.$formatters.unshift(function(value) {
               if(!value) return value;
               var isValid = regex.test(value);
               ngModelController.$setValidity('Does not match pattern', isValid);
               return value;
            });

            element.on('keypress', function(e) {
                var char = String.fromCharCode(e.which);
                var text = angular.element(e.srcElement).val();
                if(!regex.test(char) || !regex.test(text)) {
                    event.preventDefault();   
                }                   
            });

        }
   };
 });

它的使用方式如下:

<textarea ng-model="text" no-new-lines></textarea>