如何为域prevent角汽车内饰？ [英] How prevent angular auto trim for fields?

查看：186 发布时间：2016/4/11 20:29:42 javascript angularjs trim

本文介绍了如何为域prevent角汽车内饰？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有什么办法prevent从自动微调角度在整个应用领域？我知道我可以prevent它使用ngTrim指令指定领域，但它并不好看这个指令的应用程序添加到所有文本字段，有没有办法做到这一点的角度模块中的各个领域？
这里是code，如果添加的输入开始，他们将不会出现在标签添加空格：

 ＆LT; DIV NG-应用＆GT;
  ＆LT; DIV NG控制器=TodoCtrl＆GT;
      {{领域}}
    ＆LT;输入类型=文本NG模型=场＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

解决方案

您可以扩展的输入【正文】的指令，低于code将自动属性 ngTrim 的值更改为假：

  .directive（'输入'，函数（$编译）{
    //编译过程中运行
    返回{
      链接（范围，iElement，iAttrs）{
        如果（iElement.attr（'型'）==='文本'）{
          iAttrs $集（'ngTrim，假）。
        }
      }
    };
}）;

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

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML LANG =ENGT＆;\r
＆LT; HEAD＆GT;\r
  ＆LT;间的charset =UTF-8＆GT;\r
  ＆LT;标题物实施例 - 例如文本输入，指令和LT; /标题＆GT;\r
  \r
\r
  ＆所述; SCRIPT SRC =https://docs.angularjs.org/angular.min.js＆GT;＆下; /脚本＆GT;\r
  \r
\r
  \r
＆LT; /头＆GT;\r
＆LT;机身NG-应用=textInputExample＆GT;\r
  ＆LT;脚本＆GT;\r
  angular.module（'textInputExample'，[]）\r
    .controller（'ExampleController'，['$范围'，函数（$范围）{\r
      $ scope.example = {\r
        文字：'客人'\r
      };\r
    }]）\r
    .directive（'输入'，函数（$编译）{\r
    //编译过程中运行\r
    返回{\r
    链接（范围，iElement，iAttrs）{\r
    如果（iElement.attr（'型'）==='文本'）{\r
    iAttrs $集（'ngTrim，假）。\r
    }\r
    }\r
    };\r
    }）;\r
＆LT; / SCRIPT＆GT;\r
＆LT;形式NAME =myForm会NG控制器=ExampleController＆GT;\r
  ＆LT;标签＆gt;字：\r
    ＆LT;输入类型=文本名称=输入NG模型=example.text要求＆GT;\r
  ＆LT; /标签＆gt;\r
  ＆LT; DIV角色=警报＆GT;\r
    ＆LT;跨度类=错误NG-秀=$ myForm.input error.required。＆GT;\r
      ！需要＆LT; / SPAN＆GT;\r
    ＆LT;跨度类=错误NG-秀=$ myForm.input error.pattern。＆GT;\r
      只有一个字＆LT;！/ SPAN＆GT;\r
  ＆LT; / DIV＆GT;\r
  ＆LT; TT＆gt;文字= {{example.text}}  -  3'; / TT＆GT;＆LT; BR /＆GT;\r
  ＆LT; TT＆gt;文字= {{example.text.length}}  -  3'; / TT＆GT;＆LT; BR /＆GT;\r
  ＆LT; TT＆GT; myForm.input $有效= {{$ myForm.input有效}}＆LT; / TT＆GT;＆LT; BR /＆GT;\r
  ＆LT; TT方式＆gt; myForm.input $错误= {{$ myForm.input错误}}＆LT; / TT＆GT;＆LT; BR /＆GT;\r
  ＆LT; TT方式＆gt; myForm会$有效= {{$ myForm会有效}}＆LT; / TT＆GT;＆LT; BR /＆GT;\r
  ＆LT; TT＆GT; myForm会$ error.required = {{！myForm会$ error.required}}＆LT; / TT＆GT;＆LT; BR /＆GT;\r
 ＆LT; /表及GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT;

编辑：

工作原理

1），可以将多个指令绑定到相同的HTML元素，它们可以共享同一个 $范围和 $属性。

2） iAttrs $集（'ngTrim，假）; 正在更新属性 NG-修剪。 //文档：因为DOM已经编译（ HTTPS你不能做到这一点使用正常的DOM操作.angularjs.org / API / NG /服务/ $编译）

3）呼叫 iAttrs。$设置将触发所有指令的更新，因此它会覆盖原来的 NG-修剪属性值。

Is there any way prevent angular from auto trim for fields in the whole application? I know that I can prevent it for specified field using ngTrim directive, but it doesn't look good add this directive to all text fields in the application, is there any way do it for all fields in the angular module? Here is code, if you add add spaces in the begin of input they will not appear in label:

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

解决方案

You can extend input[text] directive, the code below will automatically change the value of the attribute ngTrim to false:

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

Reference: 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>

EDIT:

How it works

1) You can bind multiple directives to the same html element and they can share the same $scope and $attributes.

2) iAttrs.$set('ngTrim', "false"); is updating the attribute ng-trim. You can't do this using normal dom manipulation because the dom is already compiled (https://docs.angularjs.org/api/ng/service/$compile)

3) Calling iAttrs.$set will trigger updates on all directives, so it will override the original ng-trim attribute value.

这篇关于如何为域prevent角汽车内饰？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何为域prevent角汽车内饰？ [英] How prevent angular auto trim for fields?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何为域prevent角汽车内饰？ [英] How prevent angular auto trim for fields?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭