javascript - 当 Angular 指令的名称真的很重要时

Question

我刚刚遇到 Angular 的一个奇怪行为:

场景如下:

在注册表单中，我想检查电子邮件的唯一性(通过对服务器的 http 调用)。
因此，我创建了一个名为 emailUnique 的指令，其客户端代码为:

<form name="form" novalidate>
<!-- some other fields -->
<input name="email" type="email" ng-model="user.email" required email-unique/>
</form>

对于帖子的其余部分，假设用户正在键入:michael，这显然不是有效的邮件。

让我们看一下指令代码中有趣的部分，触发我感兴趣的行为:

angular.module('directives.emailUnique', [])
    .directive('emailUnique', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, el, attrs, ctrl) {
                ctrl.$parsers.push(function (viewValue) {
                    console.log(viewValue);   //What do you expect here for viewValue? answer below
                });
            }
        };
    });

在给出答案之前，乍一看，答案在逻辑上应该是:

undefined 

为什么？因为:

• 我们精确地定义了 type="email" 属性，而不仅仅是 type="text"
• michael 不是有效的邮件。
• Angular 的编译器应该符合经典的 HTML 行为。

经过测试，答案如预期的那样是undefined。我的完整指令的逻辑将基于此，并且整个工作正常。

现在，让我们重命名该指令:emailUnique 变为 somethingUnique。
现在的客户:

<input name="email" type="email" ng-model="user.email" required something-unique/>

惊喜:console.log(viewValue) 现在显示:michael，而不是 undefined ...

显然，在这种情况下处理电子邮件字段时，名称以 email 开头会产生奇怪的效果。

我的问题很简单:有充分的理由吗？一个可能的错误？我可能误解了一些概念？

一些进一步的精度:

• Angular's documentation关于带 Angular 电子邮件字段不提供一些可能会干扰 email-unique 的 email 属性。实际上，它是基于 type="email"
• 无论表单的 novalidate 属性是否存在，我都遇到了同样的问题。

Answer 1

问题是指令的优先级。由于您依赖于添加解析器的时间，因此您需要设置指令的优先级 - 这将确保您需要的时间。

在您的演示中，somethingUnique 指令在验证添加到解析器列表之前运行(它最终位于 3 个解析器的中间)。而对于 emailUnique，它是在后面添加的。

将指令的优先级设置为大于 0 的值可确保它在 emailValidation 始终为您提供 undefined 后触发(来自 $compile docs 的注释:“后链接函数以相反的顺序运行”)。要确认这一点，您可以通过将其优先级设置为小于 0 来强制 emailUnique 失败。

所以这解决了问题:

.directive('somethingUnique', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 100,
        link: function (scope, el, attrs, ctrl) {
            ctrl.$parsers.push(function (viewValue) {
                console.log(viewValue);
            });
        }
    };
});

Updated plunker

更新名称问题: Angular 似乎按字母顺序处理具有相同优先级的指令。所以 homethingUnique 表现得像 emailUnique 因为两者都在 input 之前，而 jomehtingUnique 表现得像 somethingUnique - 输入后运行。

但是Angular's docs说:“具有相同优先级的指令的顺序未定义。”所以我们不能指望按字母顺序排列。