AngularJS ng-blur 指令详解及简单实例

什么是ng-blur指令？

ng-blur是AngularJS中的一个指令，它用于在指定元素失去焦点时执行一个表达式或函数。具体来说，当元素上绑定了ng-blur指令时，当该元素失去焦点时，会自动执行与该指令绑定的表达式或函数。

ng-blur指令的使用方法

我们可以将ng-blur指令添加到任何HTML元素上，用以监听该元素的失去焦点事件。下面是一个简单的使用例子，当输入框失去焦点时，弹出一个alert提示框。

<input type="text" ng-blur="showAlert()" />

$scope.showAlert = function() {
  alert('Input field lost focus!');
};

上面例子中，ng-blur指令被添加到一个输入框元素上，并指定了一个showAlert()函数。当该输入框失去焦点时，该函数会被调用，弹出一个提示框。

多个ng-blur指令的使用方法

在一个元素上，我们也可以添加多个ng-blur指令，每个指令对应不同的表达式或函数。下面是一个简单的例子。

<input type="text" ng-blur="alert('blur 1');" ng-blur="alert('blur 2');" />

当输入框失去焦点时，两个表达式都会执行，依次弹出两个提示框。

实际使用中的示例

在实际使用中，ng-blur指令常常用于表单元素的处理上，如在输入框失去焦点时检验输入的内容是否合法。例如下面的示例。

<form ng-app="myApp" ng-controller="myCtrl">
  <label>Username:</label>
  <input type="text" ng-model="username" ng-blur="checkUsername()" /><br>
  <label>Password:</label>
  <input type="password" ng-model="password" ng-blur="checkPassword()" /><br>
  <button ng-click="login()">Login</button>
</form>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.checkUsername = function() {
    if(!$scope.username || $scope.username.length < 6) {
      alert('Username invalid!');
    }
  }
  $scope.checkPassword = function() {
    if(!$scope.password || $scope.password.length < 6) {
      alert('Password invalid!');
    }
  }
  $scope.login = function() {
    if(!$scope.username || !$scope.password) {
      alert('Please enter both username and password!');
      return;
    }
    alert('Login success!');
  }
});

在这个例子中，ng-blur指令被应用于用户名和密码输入框上，分别对应了两个函数，用于检验输入的内容是否合法。当输入框失去焦点时，对应的函数会被调用，提示用户输入的内容是否合法。当用户点击登录按钮时，会触发登录事件，这时会再次对用户名和密码进行检验，确保它们都有值。若均有效，则提示登录成功。

总结

通过本文的讲解，我们了解到了ng-blur指令的基本使用方法，并结合实例说明了该指令在表单处理上的应用。希望本文可以对读者在学习和使用AngularJS框架时，有所帮助。