javascript - 创建 AngularJS 指令来验证模糊

Question

希望重新创建 Angular 1.3.X 中可用的一些功能——我正在创建的应用程序必须在 IE 8 中运行良好(或至少足够好)出于这个原因，我(遗憾地)被迫不使用 1.3.X。我在尝试模拟 1.3.X 中提供的 $ng-touched attr 时遇到了一些麻烦。

我们的应用程序的一部分需要提醒用户，如果他们使用 tab 浏览表单元素，则其表单元素无效。就目前情况而言，它不会在任何表单元素上设置 $invalid 属性，除非我输入了文本并将其删除。我尝试使用 $pristine 和 $dirty 在 Tab 键切换后实现 $invalid ，但它们似乎都根据输入的值起作用，而不是是否被碰过(也许这就是1.3.X的一大优点)

目标:当用户使用 Tab 键浏览表单时，可以触发验证，并将每个空表单元素设置为 $invalid(如果它为空)。基本上是为了模拟 1.2.X 中 $ng-touched attr 的行为。这是我到目前为止所拥有的:

angular.module('goodStewardApp')
.directive('chf-validate', function () {
return {
  require: 'ngModel',
  link: function(scope, elm, attrs, ctrl) {
    $(elm).blur(
      function(elm) {
        ctrl.$setValidity(elm, false);
      }
    );
  }
};
});

任何帮助将不胜感激。谢谢!

Answer 1

事实证明，在 Angular 1.2.x 中实现模拟 ng-touched 行为的最佳方法是使用 ngBlur 将验证属性设置为 true。所以:

<form name="aForm">

   <input name="foo" ng-model="foo.bar" ng-blur="validateThisElement=true" ng-required="true">

   <div ng-show="aForm.foo.$error.required && validateThisElement"> 
      Oh no! An alert!
   </div>

</form>

这允许您在用户选项卡浏览您的表单后运行验证，这是习惯使用计算机的人们与您的 Angular 表单/应用程序交互的常见方式。希望这可以帮助任何因 IE8 原因而仍陷入 1.2.X 困境的人!