Question

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

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

Answer 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属性值。

Answer 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指令没有链接功能，因此不需要链接功能，因此您可以简单地提供自己的指令，而不必担心破坏任何内容。

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

2 个答案: