如何防止字段的角度自动修剪？答案

【问题标题】：How prevent angular auto trim for fields?如何防止字段的角度自动修剪？
【发布时间】：2015-08-12 13:20:05
【问题描述】：

有什么方法可以防止整个应用程序中字段的角度自动修剪？我知道我可以使用 ngTrim 指令阻止指定字段使用它，但是将此指令添加到应用程序中的所有文本字段看起来不太好，有没有办法对角度模块中的所有字段执行此操作？这是代码，如果您在输入的开头添加空格，它们将不会出现在标签中：

<div ng-app>
  <div ng-controller="TodoCtrl">
      {{field}}
    <input type="text" ng-model="field">
  </div>
</div>

【问题讨论】：

你能举一个你的代码的例子吗？很难说出你指的是什么。
为什么不能修剪？也许有比简单地禁用ngTrim更好的解决方案。
查看代码（1.3.15）似乎没有办法-搜索ngTrim！我没想到会这样！
因为数据库中的字段开头有空格，需要比较一下。
您可以修剪数据库字段以进行比较？

标签： javascript angularjs trim

【解决方案1】：

您可以扩展input[text]指令，下面的代码会自动将属性ngTrim的值更改为false：

.directive('input', function($compile){
    // Runs during compile
    return {
      link(scope, iElement, iAttrs) {
        if (iElement.attr('type') === 'text') {
          iAttrs.$set('ngTrim', "false");
        }
      }
    };
});

参考： https://docs.angularjs.org/api/ng/type/$compile.directive.Attributes

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-text-input-directive</title>
  

  <script src="https://docs.angularjs.org/angular.min.js"></script>
  

  
</head>
<body ng-app="textInputExample">
  <script>
  angular.module('textInputExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.example = {
        text: 'guest'
      };
    }])
    .directive('input', function($compile){
    	// Runs during compile
    	return {
    	  link(scope, iElement, iAttrs) {
    	    if (iElement.attr('type') === 'text') {
    	      iAttrs.$set('ngTrim', "false");
    	    }
    	  }
    	};
    });
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>Single word:
    <input type="text" name="input" ng-model="example.text" required>
  </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.pattern">
      Single word only!</span>
  </div>
  <tt>text = {{example.text}} - 3</tt><br/>
  <tt>text = {{example.text.length}} - 3</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
 </form>
</body>
</html>

编辑：

工作原理

1) 您可以将多个指令绑定到同一个 html 元素，并且它们可以共享相同的 $scope 和 $attributes。

2) iAttrs.$set('ngTrim', "false"); 正在更新属性 ng-trim。您不能使用普通的 dom 操作来执行此操作，因为 dom 已经编译 (https://docs.angularjs.org/api/ng/service/$compile)

3) 调用iAttrs.$set 将触发所有指令的更新，因此它将覆盖原来的ng-trim 属性值。

【讨论】：

这不是有效的 js 代码，但我明白你的想法并尝试实现它。
我能够运行这段代码，但我仍然不明白它是怎么可能的，但这不是一个问题，所以你的答案是正确的。
我编辑了我的答案，基本上因为所有指令都共享相同的范围，更改任何属性都会反映在所有指令中。
有没有办法将它用于 1.3.0 之前的 Angular？
我已经在这里得到答案：stackoverflow.com/questions/30557490/…

【解决方案2】：

另一种扩展input 指令（或任何指令/服务）的方法是使用decorator：

app.config(function($provide) {
  $provide.decorator('inputDirective', function($delegate) {
    var directive = $delegate[0],
        link = directive.link;

    link.post = function(scope, element, attrs) {
      attrs.$set('ngTrim', 'false');
    };

    return $delegate;
  });
});

Working Plunker

我个人更喜欢这种方法，因为它允许我在需要时执行指令的原始代码。在这种特殊情况下，这是不必要的，因为 input 指令没有链接功能，因此您可以简单地提供自己的功能，而不必担心会破坏任何东西。

【讨论】：

有没有办法将它用于 1.3.0 之前的 Angular？
我已经在这里得到了答案：stackoverflow.com/questions/30557490/…