AngularJS 指令：ng-init、ng-app、ng-model 和 ng-repeat
詹姆斯·哈特曼
⚡ 智能摘要
AngularJS 指令为纯 HTML 添加了新的行为。ng-app、ng-init、ng-model 和 ng-repeat 指令用于引导应用程序、初始化本地数据、将表单控件绑定到模型，以及为每个集合项克隆一次元素。
AngularJS 中的指令是什么？
A 指示 在 AngularJS 中，指令（directions）赋予 HTML 新的功能。当 AngularJS 处理 HTML 代码时，它首先会查找页面中的指令，然后根据这些指令解析 HTML 页面。我们在前面的章节中已经见过一个简单的 AngularJS 指令示例——“ng-model 指令”。该指令用于将数据模型绑定到视图。
注意： 您可以在 HTML 页面中使用 ng-init、ng-repeat 和 ng-model 指令编写基本的 AngularJS 代码，而无需使用控制器。这些指令的逻辑位于 AngularJS 提供的文件中。 Google控制器是 AngularJS 中更高阶的编程结构，它允许业务逻辑的实现，但正如前面提到的，对于一个 AngularJS 应用程序来说，拥有控制器并不是强制性的。
但是浏览器是如何运行这种文件的呢？
AngularJS 指令在 HTML 中的工作原理
正如我们在引言中所定义的那样，AngularJS 指令是一种扩展 AngularJS 功能的方式。 HTML当页面加载时，AngularJS 编译器会遍历 DOM，将每个元素与已注册的指令进行匹配，并附加找到的行为。
AngularJS 它内置了数十个指令，此外你还可以自行注册其他指令。下面将通过示例解释四个指令：ng-app、ng-init、ng-model 和 ng-repeat，它们是初学者最先接触到的指令。在学习这些示例之前，请注意指令的四种编写方式。
AngularJS 指令有哪四种类型？
指令并不总是属性。AngularJS 编译器可以通过元素名称、属性、类名或注释来匹配指令，每个指令都会通过其自身声明它接受哪些形式。 restrict 属性。默认值为 EA因此，除非另有说明，否则元素和属性语法都有效。当您编写自定义指令时，值最为重要，因为编译器会忽略限制值排除的任何形式。
| 限制值 | 匹配 | 示例标记 | 典型用途 |
|---|---|---|---|
| E | 元素名称 | 拥有模板的独立模块 | |
| A | 属性 | 为现有元素添加行为 | |
| C | 班级名称 | 无法添加新属性的旧版标记 | |
| M | 评论 | 罕见，仅用于向后兼容 |
👍 提示： 优先使用元素和属性语法。 官方 AngularJS 指令参考 将类和注释表单视为旧版选项。以下示例均使用属性语法。
AngularJS 中的 ng-app
此指令用于初始化 AngularJS 应用程序。当此指令出现在 HTML 页面中时，它实际上告诉 AngularJS 此 HTML 页面是一个 AngularJS 应用程序。
ng-app 示例
下面的示例展示了如何将普通的 HTML 应用程序转换为 AngularJS 应用程序。
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app=""> Tutorial Name : {{ "Angular" + "JS"}} </div> </body> </html>
⚠️ 警告： 该列表保留了原貌 chrset="UTF 8"完全按照发布内容。正确的属性是 charset="UTF-8".
Code 说明：
- 我们在 div 标签中添加了“ng-app”指令，以表明这是一个 AngularJS 应用。请注意，“ng-app”指令可以应用于任何标签，因此也可以放在 body 标签中。
- 由于我们已将此应用程序定义为 AngularJS 应用程序，因此现在可以使用 AngularJS 的功能。在本例中，我们使用表达式来简单地连接两个字符串。
如果代码执行成功，则会显示以下输出。
输出：
输出结果清晰地显示了表达式的执行结果，这只有在我们将应用程序定义为 AngularJS 应用程序的情况下才能实现。下一个指令提供了它的数据。
AngularJS 中的 ng-init
这用于初始化应用程序数据。有时，您的应用程序可能需要一些本地数据，这可以通过 ng-init 指令来实现。
ng-init 示例
在这个例子中，我们将使用 ng-init 指令创建一个名为“TutorialName”的变量，并在页面上显示该变量的值。
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="" ng-init="TutorialName='Angular JS'"> Tutorial Name : {{ TutorialName}} </div> </body> </html>
Code 说明：
- ng-init 指令被添加到我们的 div 标签中，以定义一个名为“TutorialName”的局部变量，并赋予该变量的值“AngularJS”。
- 我们使用 AngularJS 中的表达式来显示变量名“TutorialName”的输出，该变量名是在我们的 ng-init 指令中定义的。
如果代码执行成功，则会显示以下输出。
输出：
在输出中，
- 结果清楚地显示了包含字符串“AngularJS”的表达式的输出。这是因为字符串“AngularJS”被分配给 ng-init 部分中的变量“TutorialName”。
下一条指令将数据从屏幕发送回模型。
AngularJS 中的 ng-model
最后，我们还有 ng-model 指令，它用于将 HTML 控件的值绑定到应用程序数据。
ng-model 的示例
在这个例子中，
- 我们将创建两个变量，分别称为“数量”和“价格”。这些变量将绑定到两个文本输入控件。
- 然后，我们将根据价格和数量值的乘积显示总金额。
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="" ng-init="quantity=1;price=5"> People : <input type="number" ng-model="quantity"> Registration Price : <input type="number" ng-model="price"> Total : {{quantity * price}} </div> </body> </html>
Code 说明：
- ng-init 指令被添加到我们的 div 标签中，以定义 2 个局部变量；一个叫做“数量”，另一个叫做“价格”。
- 现在我们使用 ng-model 指令将“人员”和“注册价格”的文本框分别绑定到我们的局部变量“数量”和“价格”。
- 最后，我们通过表达式显示总数，即数量和价格变量的乘积。
如果代码执行成功，则会显示以下输出。
输出：
- 输出清楚地显示了人员值和注册价格的乘积。
现在，如果您更改文本框中的“人数”和“注册价格”的值，则“总计”会自动更改。
- 以上输出仅展示了 AngularJS 中数据绑定的强大功能，这是通过使用以下方式实现的： ng-model 指令.
最后一个函数可以同时处理多个值。
AngularJS 中的 ng-repeat
这用于重复 HTML 元素。下面的示例展示了如何使用 ng-repeat 指令.
ng-repeat 的示例
在这个例子中，
- 我们将在数组变量中保存一系列章节名称，
- 然后使用 ng-repeat 指令将数组的每个元素显示为列表项
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="" ng-init="chapters=['Controllers','Models','Filters']"> <ul> <li ng-repeat="names in chapters"> {{names}} </li> </ul> </div> </body> </html>
Code 说明：
- ng-init 指令被添加到我们的 div 标签中，以定义一个名为“chapters”的变量，它是一个包含 3 个字符串的数组变量。
- ng-repeat 元素的使用方式是声明一个名为“names”的内联变量，并遍历 chapters 数组中的每个元素。
- 最后，我们显示本地内联变量“names”的值。
如果代码执行成功，则会显示以下输出。
输出：
- 上面的输出仅显示 ng-repeat 指令获取名为“chapters”的数组中的每个值并为数组中的每个项目创建 HTML 列表项。
这四点涵盖了启动、数据、绑定和重复。下面的列表展示了接下来的内容。
其他常用的AngularJS内置指令
以上四条指令只是初始集合，并非整个库。下面的每条指令都是一个属性，您可以直接将其添加到它所控制的元素上。
- ng-bind： 将作用域值写入元素的文本，而不在加载时短暂显示原始大括号。
- ng-if： 当表达式为假时，从 DOM 中移除该元素；当表达式为真时，重建该元素。
- ng-show 和 ng-hide： Toggl使用 CSS 控制元素的可见性。元素会保留在 DOM 中，因此重复切换的开销更小。
- ng-class： 在表达式中添加或删除 CSS 类，使样式跟随模型。
- ng-click： 当用户点击元素时，运行表达式或作用域函数。
- ng-controller： 当页面长度超过 ng-init 的处理能力时，将控制器附加到标记块上。
- ng-disabled 和 ng-readonly： 当表达式为真时，设置匹配的表单属性。
以下常见问题解答针对的是本列表之后最常被问到的问题。
