Question

如果用户在字段为空时尝试提交表单，我想突出显示红色字段。因此，我在提交时将showErrors布尔值设置为true，并根据此值ng-required='showErrors'有条件地要求我的字段。

我定义了一个isValid函数，该函数触发摘要周期以允许showErrors值传播，但该函数的行为不符合我的要求。如果该字段为空，则第一次点击提交按钮时，isValid会返回true，然后会在后续点击时返回false，但如果该字段为空，我希望它始终返回false。

如何强制我的isValid函数在返回有效性之前等待摘要周期传播？

https://plnkr.co/edit/wH6HfawquHJwR69AUPRI

Answer 1

根据个人经验，通过在表单级别使用css来控制高亮度会更容易。

当我们需要动态设置ng-required时，

required保留使用，例如用户可以选择输入手机或电子邮件，然后只有用户需要required用于电子邮件输入字段选择电子邮件。

<form ng-class='{showErrors: showErrors}'>
  <input required />
</form>

.showErrors .ng-invalid {
  border-color: red;
}

Answer 2

TlDr; 使用$timeout(function(){...});

@Icycool提供的答案确实可以解决此用例。但是我来这篇帖子的原因是该帖子标题的原因：“如何等到$digest周期完成？”

我进行了一些搜索，发现this post在编码怪胎上解释了$digest周期中即将出现的不同元素。

它说明$timeout可用于等待一个周期，（或者，如果添加了timeout参数，则可以更多），它还说明可以使用$evalAsync，但这并不总能解决问题为我。

因此，这是一个示例，其中监视作用域变量并触发了输入元素。这有点抽象，因为我现在没有很好的用例。

$scope.$watch('vm.foo', function(newFoo) {
    if (newFoo) {
        $timeout(function() {
            $window.alert('new Foo set!' + newFoo);
        });
    } else {
        $timeout(function() {
            $window.alert('Foo was removed!');
            angular.element('input').focus(); 
        }, 2000); // waits for 2 secs before alert and focus
    }
});

我发现this plunker使用普通的超时时间和$apply，但是您可以随意使用它以使其适用于您的用例，我发现它有助于理解周期：{{3 }}

Angular，等到摘要周期完成后再从函数返回？

2 个答案: