AngularJs 失去焦点事件

   
   
   
   

   

        field1:
       
       

        field2:
       
       

       
{{countedValue}}

       

       

        focus field1
        focus field2
   

补充：

当失去焦点时验证错误

如果你想保留错误验证的实时性，那么可以在用户离开该输入框时显示错误信息。要做到这一点，我们可以添加一个指令，将添加一个新的变量。

我们使用 ngFocus 指令，它看起来像：

app.directive('ngFocus', [function() {
  var FOCUS_CLASS = "ng-focused";
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      ctrl.$focused = false;
      element.bind('focus', function(evt) {
        element.addClass(FOCUS_CLASS);
        scope.$apply(function() {ctrl.$focused = true;});
      }).bind('blur', function(evt) {
        element.removeClass(FOCUS_CLASS);
        scope.$apply(function() {ctrl.$focused = false;});
      });
    }
  }
}]);

要使用 ngFocus ，我们只需要简单加上这个指令到输入框元素上，像这样：

<input ng-class="{error: signup_form.name.$dirty && signup_form.name.$invalid}" type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required ng-focus />

加上 ngFocus 指令后，将在输入框的blur和focus事件中注册相应操作，当焦点在该输入框时，它添加一个class（ng-focused），并且该输入框的$focused属性也将变为true。因此，你可以根据需求是否在焦点上来个性化设置显示错误消息。例如：

<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid && !signup_form.name.$focused">