AngularJS – ng-blur 指令

Z时代
2024-01-10
分类：综合

当元素失去焦点时，AngularJS 中的ng-blur 指令会被触发。blur事件与DOM 操作（如从焦点移开）同步执行。

如果在$apply期间触发事件，AngularJS 也会使用scope.$evalAsync执行表达式，以确保一致的应用程序状态。

语法

<element ng-blur="expression">..Content..</element>

示例 1 - ng-blur 指令

在您的 Angular 项目目录中创建一个文件“ ngBlur.html ”并复制粘贴以下代码片段。

<!DOCTYPE html>
<html>
   <head>
      <title>ngBlur Directive</title>
      <script xx_src="https://cdn.staticfile.org/angularjs/1.6.9/angular.min.js"></script>
   </head>
   <body style="text-align: center;">
      <h1 style="color: green;">
         Welcome to nhooo.com
      </h1>
      <h2>
         AngularJS | ngBlur Directive
      </h2>
      <div ng-app="app">
         <div ng-controller="nhooo">
            <h5 ng-show="msg">Input Text Box Focused</h5>
            <input type="text" ng-focus="msg=true" ng-blur="msg=false" />
         </div>
      </div>
      <!-- Script for passing the values and checking... -->
      <script>
         var app = angular.module("app", []);
         app.controller("nhooo", [
         "$scope",
         function ($fun, $timeout) {
            $fun.msg = false;
         },
      ]);
   </script>
</body>
</html>

输出结果

要运行上述代码，只需转到您的文件并将其作为普通 HTML 文件运行即可。您将在浏览器窗口中看到以下输出。

当文本框被聚焦时，会出现消息 -

示例 2

在您的 Angular 项目目录中创建一个文件“ ngBlur.html ”并复制粘贴以下代码片段。

<!DOCTYPE html>
<html>
   <head>
      <title>ngBlur Directive</title>
      <script xx_src="https://cdn.staticfile.org/angularjs/1.6.9/angular.min.js"></script>
   </head>
<body ng-app="" style="text-align: center;">
   <h1 style="color:green">
      Welcome to nhooo.com
   </h1>
    <h2>
      AngularJS | ngBlur Directive
   </h2>
   <textarea ng-blur="count = count + 1" ng-init="count=0"></textarea>
   <h3>Number of times box was focussed: {{count}}</h3>
</body>
</html>