AngularJS ng-click、ng-show 和 ng-hide 指令

由： 詹姆斯·哈特曼 詹姆斯·哈特曼
Hours 更新

⚡ 智能摘要

AngularJS 事件允许 Web 应用程序响应用户输入，例如鼠标点击、按键和悬停操作。包括 ng-click、ng-show 和 ng-hide 在内的指令以声明式的方式在标记中绑定这些行为，而无需手动编写 DOM 监听器。

  • 🖱️ 点击处理： ng-click 将表达式或控制器函数附加到元素，最常见的是按钮。
  • 👁️ 条件显示： 当表达式为真时，ng-show 会渲染元素；而当表达式为真时，ng-hide 会移除元素。
  • ???? 机制： 这两个指令都会切换内置的 ng-hide CSS 类，该类会将显示设置为 none，因此元素会保留在 DOM 中。
  • 🔗 作用域绑定： 放置在 $scope 上的成员变量控制可见性，在处理程序中更改该变量会立即更新视图。
  • 📋 指令范围： 十八条监听指令涵盖了 blur、change、focus、keyboard、mouse、paste 和 submit 事件。
  • ⚠️ 支持状态： AngularJS 已于 2021 年 12 月 31 日停止维护，因此新项目应该改用现代 Angular。
阅读更多

AngularJS ng-click ng-show ng-hide 指令

AngularJS 事件

AngularJS 事件 事件是使 Web 应用程序能够与用户输入（例如鼠标点击、键盘输入和鼠标悬停）进行交互的功能。Web 应用程序必须处理事件才能执行特定的任务和操作，每个事件都会在用户执行相应操作时触发。

在创建 Web 应用程序时，您的应用程序迟早需要处理 DOM 事件，例如鼠标点击和移动、键盘按下和更改事件。 AngularJS 提供以声明方式处理这些事件的指令。

例如，如果页面上的按钮在点击时需要处理某些操作，ng-click 事件指令提供了该钩子。

⚠️ 支持通知： AngularJS 已达到 生命终结日期为2021年12月31日 并且不再收到 Angular 团队的任何补丁或安全修复。以下指令仍然适用于维护现有的 AngularJS 1.x 应用程序；对于新项目，请使用现代版本。 角度方向其中这些指令被事件绑定所取代，例如： (click) 并通过 *ngIf.

AngularJS 中的 ng-click 指令是什么？

此 “ng-click 指令” 在 AngularJS 中，点击事件会在 HTML 元素被点击时应用自定义行为。它通常用于按钮，因为按钮是最常添加点击响应的地方，此外，它还用于在点击时弹出警告框。

AngularJS 中 ng-click 的语法

<element
 ng-click="expression">
</element>

AngularJS 中的 ng-click 示例

在这个 ng-click 示例中，每次用户点击按钮时，计数器变量都会递增。

AngularJS 中的 ng-click 指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

Code 说明：

  1. ng-init 指令设置局部变量 count 到0。
  2. 按钮上的 ng-click 指令递增 count 每次点击增加 1。
  3. 插值 {{count}} 向用户显示当前值。

输出：

AngularJS 中的 ng-click

屏幕上会显示“递增”按钮，初始计数为零。点击该按钮会增加计数，如下图所示。

AngularJS 中的 ng-click

AngularJS 中的 ng-show 指令是什么？

此 ng-show 指令 显示或隐藏给定内容 HTML 根据传递给 ng-show 属性的表达式来显示或隐藏元素。在内部，通过移除或添加该表达式来显示或隐藏元素。 .ng-hide CSS 类，一个预定义的类，用于设置 display 至 none.

AngularJS 中 ng-show 的语法

<element
 ng-show="expression">
</element>

AngularJS 中的 ng-show 示例

本示例使用 ng-show 来显示隐藏元素。

AngularJS 中的 ng-show 指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code 说明：

  1. 按钮上的 ng-click 指令引用了一个 ShowHide 控制器中定义的函数 DemoController.
  2. ng-show 属性附加到包含文本“Angular”的 div 元素上。该元素的可见性受到控制。
  3. 在控制器中， IsVisible 成员变量被放置在作用域对象上并初始化为 false因此，当页面首次加载时，该 div 元素会被隐藏。使用 ng-show 时，其值为 true 显示元素并 false 把它藏起来了。
  4. 此 ShowHide 函数集 IsVisible 设置为 true，使 div 元素可见。

输出：

AngularJS 中的 ng-show 指令

包含文本的div元素最初不会显示，因为 IsVisible 初始状态为假。点击 显示 Angular 将其设置为 true，文本就会显示出来。

AngularJS 中的 ng-show 指令

相关文章

AngularJS 中的 ng-hide 指令是什么？

此 ng-hide 指令 当表达式的计算结果为 TRUE 时隐藏元素，当表达式的计算结果为 FALSE 时显示元素——这与 ng-show 的作用正好相反。其内部使用相同的机制。 .ng-hide CSS类。

AngularJS 中 ng-hide 的语法

<element
 ng-hide="expression">
</element>

AngularJS 中的 ng-hide 示例

此示例与 ng-show 示例类似，因此可以直接比较这两个指令。

AngularJS 中的 ng-hide 指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code 说明：

  1. 按钮上的 ng-click 指令引用了 ShowHide 功能 DemoController.
  2. 此 ng-hide 属性附加到包含文本“Angular”的div元素上。
  3. IsVisible 初始化为 false因为这是 ng-hide 而不是 ng-show，所以 false 值表示该 div 元素处于隐藏状态。 可见 页面首次加载时。
  4. 此 ShowHide 函数集 IsVisible 设置为 true，即可隐藏 div 元素。

输出：

AngularJS 中的 ng-hide 指令

该div元素最初显示，因为ng-hide参数设置为false。点击 隐藏 Angular 验证通过，该词消失。

AngularJS 中的 ng-hide 指令

ng-show vs ng-hide vs ng-if：主要区别

三个指令控制着用户是否能看到某个元素，选择哪个指令会影响页面行为和渲染性能。前两个指令只切换一个 CSS 类，因此该元素始终显示在页面上；第三个指令则会添加或移除该元素本身。

方面 吴秀 ng-hide ng-if
元素可见 表达式为真 表达式为假 表达式为真
DOM 中的元素 总是 总是 仅当如此时
使用的方法 Toggles .ng-hide 类 Toggles .ng-hide 类 创建和销毁元素
儿童范围 共享父级范围 共享父级范围 创建一个新的子作用域
隐藏时的观察者 仍然活跃 仍然活跃 去除
最适合 频繁切换灯光内容 反转条件 重口味内容很少出现

当元素频繁切换时，请使用 ng-show 或 ng-hide，因为元素不会被重建，切换操作仅需更改一个类名。对于很少显示且开销较大的部分，请使用 ng-if，因为移除元素也会移除其监听器，从而降低每次循环的摘要开销。

AngularJS 事件监听器指令

您可以使用以下一种或多种方法为 HTML 元素添加 AngularJS 事件监听器。 指令:

  • 模糊
  • ng-改变
  • ng-点击
  • ng-复制
  • ng-cut
  • ng-双击
  • ng-焦点
  • ng-keydown
  • ng-按键
  • ng-键盘输入
  • ng-鼠标按下
  • ng-鼠标进入
  • ng-鼠标离开
  • ng-鼠标移动
  • ng-鼠标悬停
  • ng-mouseup
  • 粘贴
  • 提交

每个指令都接受一个表达式，并且原始浏览器事件可以在其中使用。 $event 当处理程序需要详细信息时，例如按下的键或点击的坐标。

常见问题

预留 $event 变量，例如 ng-click="handle($event)"然后控制器接收到原生事件，可以读取目标、坐标或调用 preventDefault。

ng-repeat 会为每个项目创建一个子作用域，因此在处理程序内部赋值基本类型只会更新该子作用域。写入父作用域的对象属性，或使用 $parent使这种变化在外部可见。

部分如此。 AI 工具将 ng-click 转换为 (click) 和 ng-show 到 *ngIf 虽然可靠，但作用域相关的逻辑和双向绑定需要人工审查，因为 AngularJS 的作用域没有直接的 Angular 等效项。

AI 助手可以快速发现常见原因：缺少 ng-app、控制器名称与模块注册不匹配，或者指令属性中存在拼写错误。建议的修复方案仍需在浏览器中进行测试。

不。AngularJS 只提供了 ng-show、ng-hide 和 ng-if 这三个指令。没有 ng-visible 指令，引用它也不会产生任何效果，因为 AngularJS 会忽略无法识别的属性。

总结一下这篇文章：