angularjs - angular.js 将每个单词大写

Question

此函数应将输入中每个单词的第一个字母大写。但 Angular 向我抛出“RangeError:超出最大调用堆栈大小”。只是因为第 9 行的 ' ' 空格。

myApp.directive('capitalizeFirst', function(uppercaseFilter, $parse) {
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
           var capitalized = inputValue.split(' ').reduce(function(prevValue, word){
            return  prevValue + word.substring(0, 1).toUpperCase() + word.substring(1)+' ';
        }, '');
           if(capitalized !== inputValue) {
              modelCtrl.$setViewValue(capitalized);
              modelCtrl.$render();
            }         
            return capitalized;
         }
         var model = $parse(attrs.ngModel);
         modelCtrl.$parsers.push(capitalize);
         capitalize(model(scope));
     }
   };
});

这是 fiddle

http://jsfiddle.net/YyYnM/205/

有人可以向我解释一下吗？我现在正在尝试解决这个问题一个小时。

Answer 1

问题就在这里

var capitalize = function(inputValue) {
           var capitalized = inputValue.split(' ').reduce(function(prevValue, word){
            return  prevValue + word.substring(0, 1).toUpperCase() + word.substring(1)+' ';
        }, '');

每次运行该函数时，它都会为您添加一个额外的空间。

Angular 的工作方式是循环运行。

每当检测到其中一个变量发生变化时，它就会运行另一个循环。

这里由于额外的空间，字符串在无限循环中发生变化，因此 Angular 消失。

一个丑陋的解决方案是事后添加

capitalized = capitalized.substring(0, capitalized.length - 1);