AngularJS指令基于指令名的第一个字符而中断

2019年8月4日 163次阅读

我写了一个表现出一些奇怪行为的Angular指令.该指令向$parsers添加一个函数,以限制用户根据正则表达式模式键入的内容.如果当前文本与模式不匹配,则解析器将文本还原为字段的先前值.

因此,当文本被还原时,Angular会将其检测为字段值的更改并再次进入解析器.这通常很好,因为传递给解析器的值现在有效,但我遇到了一个非常奇怪的怪癖.

我得到这个指令后,我决定更改它的名字.我这样做了,突然验证失败了.我的错误处理程序报告了过多的递归.当我调试代码时,我发现输入无效字符后第二次调用解析器会将字段值参数显示为’undefined’.结果,我的代码将值视为无效并尝试再次返回,这导致另一个调用带有’undefined’值等的解析器,直到发生堆栈溢出.

我更改了指令名称,再次调试,一切都突然开始正常工作！对解析器的第二次调用具有正确的值而不是’undefined’.

我做了一些游戏,发现我可以通过改变指令名称的第一个字符来重新创建这个bug.以’a’到’m’字符开头的指令名称运行良好,但以’n’到’z’开头的名称破了(好吧,我承认,我没有尝试所有26个字符,但是一个字符的样本显示样本中指令名称的第一个字母位于字母表前半部分的所有名称以及所有在第一个字母位于字母表后半部分的运行失败的情况下都是如此.

我用我的代码组装了一个plunker来演示它：

http://plnkr.co/edit/k8Hpk2jsMCS6xjOKiES5

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

app.controller('MainCtrl', function($scope) {
    $scope.someNumber;
});

app.directive('formattedWithPattern', function () {
    // Formats an input field as a positive integer.
    // Usage:
    //  <input type="text" data-integer-format>
    // Creates:
    //  <input type="text" data-integer-format>
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {
            if (!ctrl) return;

            var pattern = attr.ngPattern;
            // get the pattern between the slashes and any modifiers
            var r = new RegExp("^/(.*)/(.*)$");
            var matches = r.exec(pattern);
            var regex;
            if (matches) {
                regex = new RegExp('^' + matches[1] + '$', matches[2]);
            }
            var lastText = '';
            var reverted = false;

            function fromUser(text) {
                var m = regex.exec(text);
                if (m) {
                    // join matches together into a single string
                    lastText = m[0];
                    if (lastText != text) {
                        // the original text contained some invalid characters
                        ctrl.$setViewValue(lastText);
                        ctrl.$render();
                    }
                }
                else {
                    // nothing in the text matched the regular expression...
                    // revert to the last good value
                    if (text != lastText) {
                        ctrl.$setViewValue(lastText);
                        ctrl.$render();
                    }
                }
                return lastText;
            }

            ctrl.$parsers.unshift(fromUser);
        }
    };
});

这是一个使用它的例子(也来自plunker)：

<body ng-controller="MainCtrl">
    <input type="text" name="testNumber" id="testNumber" 
       data-ng-model="someNumber" data-ng-required="true"
       ng-pattern="/[\+\-]?[0-9]*(\.[0-9]*)?/" 
       formatted-with-pattern />
    {{zip}}
</body>

出于某种原因,plunker的行为与我在计算机上测试时看到的行为略有不同.所有失败仍然在字母表的上限范围内,但失败从’o’开始而不是’n’.

如果您在app.js和index.html中更改指令的名称以从任何字符“o”到“z”开始并重新运行plunker,您可以轻松地看到该行为.上面的指令使用数字模式,因此当指令名称为“valid”时,指令不允许除0-9,.,和 – 之外的任何字符.当名称为“无效”时,该指令还允许字符,因为在不实际更改输入字段值的情况下,对解析器的递归调用正在中断.

这让我觉得非常奇怪的行为.我没有在网上找到任何其他的提及,所以我想我会把它扔出去.有没有人遇到过这样的事情？这是AngularJS中的错误吗？除了确保我的指令名称以字符a到m开头之外,有没有人知道解决方法？

最佳答案 您可以提高指令优先级：确保执行顺序如下：

return {
  require: 'ngModel',
  priority: 1, // default is 0
  link: function (scope, element, attr, ctrl) {
    ...
  }
};

它将确保您的指令postLink函数将在ng-required和ng-pattern之后运行.

示例Plunker：http://plnkr.co/edit/dy1zCq9F8EejYWo1m4Oe?p=preview

您也可以直接使用ctrl.$viewValue来避免指令执行顺序问题.

实际上,恕我直言,使用ctrl.$viewValue更有意义,因为如果它无效,你想重新渲染视图,所以你需要一个真实的视图值,而不是已经通过其他解析器的值.

为此,您可以从以下位置更改解析器：

function fromUser(text) {
  ...
}

相反：

function fromUser() {
  var text = ctrl.$viewValue;
  ...
}

示例Plunker：http://plnkr.co/edit/FA2Fq4aNlUrcdUMoopuX?p=preview

希望这可以帮助.

点赞