使用 Angular 格式化程序/解析器答案

【问题标题】：Using Angular formatters / parsers使用 Angular 格式化程序/解析器
【发布时间】：2016-06-11 05:48:13
【问题描述】：

似乎无法让 Angular 格式化程序和解析器工作：

app.js：

var itemApp = angular.module('itemApp', []);

itemApp.controller('ItemController', ['$scope',  function($scope) {

      $scope.some_value = 'abcEFG';

}]);

itemApp.directive('changeCase', function () {
    return {
          restrict: 'A',
          require: 'ngModel',
          link: function (scope, element, attrs, ngModel) {

            ngModel.$formatters.push(function(value){
              return value.toUpperCase();
            });

            ngModel.$parsers.push(function(value){
              return value.toLowerCase();
            });

          }
    };
});

view.html：

  <input ng-model="some_value" changeCase>

它不起作用 - 没有错误，只是输入或模型中的值没有发生任何变化。我对 Angular 很陌生，我什至无法弄清楚如何调试它。

【问题讨论】：

toUpperCase 和 toLowerCase 以及所有字符串操作方法都不会就地操作字符串，它们会返回转换后的字符串。所以你会做return value.toUpperCase()等
对不起，草率的示例代码。还是不行

标签： javascript angularjs angularjs-directive

【解决方案1】：

试着写：

<input ng-model="some_value" change-case> //camel-case

这在angular docs中有解释

归一化

Angular 规范化元素的标签和属性名称确定哪些元素匹配哪些指令。我们通常指通过区分大小写的 camelCase 规范化名称（例如模型）。但是，由于 HTML 不区分大小写，因此我们指的是 DOM 中的指令以小写形式表示，通常使用 DOM 元素上以破折号分隔的属性（例如 ng-model）。

归一化过程如下：

从元素/属性的前面去除 x- 和 data-。

将名称或 _ 分隔的名称转换为驼峰式。

【讨论】：