问题的出现原因是在用户离开一个字段后验证字段。解决方法是创建一个指令，将它应用到所有的输入和选择元素上。这个指令会在用户聚焦或离开元素时自动应用。

具体的解决方法如下所示：

var blurFocusDirective = function () {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, elm, attr, ctrl) {
            if (!ctrl) {
                return;
            }
            elm.on('focus', function () {
                elm.addClass('has-focus');
                scope.$apply(function () {
                    ctrl.hasFocus = true;
                });
            });
            elm.on('blur', function () {
                elm.removeClass('has-focus');
                elm.addClass('has-visited');
                scope.$apply(function () {
                    ctrl.hasFocus = false;
                    ctrl.hasVisited = true;
                });
            });
            elm.closest('form').on('submit', function () {
                elm.addClass('has-visited');
                scope.$apply(function () {
                    ctrl.hasFocus = false;
                    ctrl.hasVisited = true;
                });
            });
        }
    };
};
app.directive('input', blurFocusDirective);
app.directive('select', blurFocusDirective);

这段代码会在用户聚焦或离开元素时为各个元素添加`has-focus`和`has-visited`类。然后可以使用这些类来显示验证错误的CSS规则：

input.has-visited.ng-invalid:not(.has-focus) {
    background-color: #ffeeee;   
}

通过这种方式，元素仍然具有`$invalid`属性等，但是可以使用CSS来提供更好的用户体验。

为什么在require中使用`?ngModel`而不是简单地使用`ngModel`？我理解需要要求ngModel存在，但是为什么要加上问号？

感谢这个想法。应该指出它需要使用jQuery（我认为-在jql中没有看到.closest()）。

并不是所有的元素都支持ngModel（例如，input type=submit）。问号表示仅在支持ngModel的元素上需要ngModel。

老实说，你不应该偏离Angular的方式来设置输入字段的状态，例如`formName.inputName.$dirty`。建议修改指令以编写类似的布尔值，如`formName.inputName.$focused`，而不是使用类名来表示失焦和布尔值来表示验证。

Angular 1.3新增了ng-model-options指令，可以通过设置选项{ 'updateOn': 'blur'}来延迟字段的验证。这样做的好处是，当用户输入内容时，不会立即触发模型的更新和表单的验证，只有在用户离开输入框后才会触发。此外，还可以使用debounce选项来延迟模型的更新和表单的验证，以减少DOM操作的次数。

然而，这种方式并不能解决所有的问题。例如，当字段的内容有效时，可能需要立即从API请求新的数据，但是只有在字段的内容无效且失去焦点后才显示错误消息。而在测试中发现，使用Angular 1.3.0 rc-3版本时，change事件直到blur事件才会触发。这就需要通过自定义指令来解决这个问题。

因此，通过ng-model-options指令设置updateOn选项为blur，可以延迟字段的验证；通过设置debounce选项可以延迟模型的更新和表单的验证；但是，如果需要在字段失去焦点前接收ng-change事件，则需要使用自定义指令来实现。而不需要添加指令，只需添加一个属性即可。

这种方式更加简洁有效，因此应该成为首选的解决方案。

在版本1.3.0之后，可以使用$touched来实现用户离开字段后进行验证。

问题的出现原因是默认情况下，Angular的ng-model会在每次按键时都执行验证，而不是在用户离开字段后进行验证。这可能会导致用户体验上的问题，特别是当用户返回到该字段时，错误消息会重新出现，因为字段已经被标记为已触摸。

解决方法是使用ng-model-options指令来修改默认行为。可以将ng-model-options设置为updateOn: 'default'，这样对于输入框来说，在按下按键时触发验证，对于下拉选择框来说，在选择选项时触发验证。

然而，这种方法仍然存在一个缺陷，即当用户返回到字段时，验证体验将不同。错误消息会始终出现，直到字段的值有效，而不是仅在第一次输入字母时出现。这可能会影响用户体验。

有人提出了另一种思路，即在用户已经知道字段无效后，每次按下按键时进行验证，以加快验证过程。但这种方法可能会牺牲用户体验。

总结起来，通过使用$touched和ng-model-options可以实现在用户离开字段后进行验证。然而，这种方法可能会影响用户体验，需要根据具体情况进行权衡和调整。