srcmini本文概述
AngularJS可以帮助你扩展具有新属性的HTML。这些属性称为指令。
AngularJS中有一组内置指令，可为你的应用程序提供功能。你也可以定义自己的指令。
指令是以ng-前缀开头的特殊属性。以下是最常见的指令：
- ng-app：此指令启动AngularJS应用程序。
- 热量：该指令初始化应用程序数据。
- ng-model：此指令定义了要在AngularJS中使用的变量模型。
- ng-repeat：此伪指令为集合中的每个项目重复html元素。
直接应用指令
ng-app指令定义了根元素。加载包含AngularJS应用程序的网页时，它将启动AngularJS应用程序并自动初始化或引导应用程序。它还用于在AngularJS应用程序中加载各种AngularJS模块。
请参阅以下示例：
在下面的示例中，我们使用div元素的ng-app属性定义了默认的AngularJS应用程序。
<div ng-app = "">
...
</div>热指令
ng-init指令会初始化AngularJS应用程序数据。它定义了AngularJS应用程序的初始值。
在下面的示例中，我们将初始化国家/地区数组。我们正在使用JSON语法定义国家/地区数组。
<div ng-app = "" ng-init = "countries = [{locale:'en-IND', name:'India'}, {locale:'en-PAK', name:'Pakistan'}, {locale:'en-AUS', name:'Australia'}]">
...
</div>指令建模
ng-model指令定义了在AngularJS应用程序中使用的模型/变量。
在下面的示例中，我们定义了一个名为“名称”的模型。
<div ng-app = "">
...
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>重复指令
ng-repeat指令为集合中的每个项目重复html元素。在以下示例中，我们遍历了许多国家。
<div ng-app = "">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>AngularJS指令示例
让我们举一个使用上述所有指令的示例：
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Directives</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "countries = [{locale:'en-IND', name:'India'}, {locale:'en-PAK', name:'Pakistan'}, {locale:'en-AUS', name:'Australia'}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>AngularJS指令列表
AnglarJS指令用于向你的应用程序添加功能。你也可以为应用程序添加自己的指令。
以下是AngularJS指令的列表：
| 指示 | 描述 |
|---|---|
| ng-app | 它定义了应用程序的根元素。 |
| ng-bind | 它将html元素的内容绑定到应用程序数据。 |
| ng-bind-html | 它将HTML元素的内部HTML绑定到应用程序数据, 还从html字符串中删除了危险代码。 |
| ng-bind-template | 它指定文本内容应替换为模板。 |
| ng-blur | 它指定模糊事件的行为。 |
| ng-change | 它指定一个表达式, 以评估用户何时更改内容。 |
| ng-checked | 它指定是否检查元素。 |
| ng-class | 它在html元素上指定css类。 |
| ng-class-even | 它与ng-class相同, 但仅对偶数行有效。 |
| ng-class-odd | 与ng-class相同, 但仅对奇数行有效。 |
| ng-click | 它指定一个表达式, 以在单击元素时求值。 |
| ng-cloak | 防止在加载应用程序时闪烁。 |
| ng-controller | 它定义了应用程序的控制器对象。 |
| ng-copy | 它指定复制事件的行为。 |
| ng-csp | 它更改了内容安全策略。 |
| ng-cut | 它指定剪切事件的行为。 |
| ng-dblclick | 它指定双击事件的行为。 |
| ng-focus | 它指定了焦点事件的行为。 |
| ng-hide | 隐藏或显示html元素。 |
| ng-href | 它指定<a>元素的URL。 |
| ng-if | 如果条件为假, 它将删除html元素。 |
| ng-include | 它在应用程序中包含html。 |
| ng-init | 它定义了应用程序的初始值。 |
| ng-jq | 它指定应用程序必须使用jQuery之类的库。 |
| ng-keydown | 它指定按键事件的行为。 |
| ng-keypress | 它指定按键事件的行为。 |
| ng-keyup | 它指定了keyup事件的行为。 |
| ng-list | 它将文本转换为列表（数组）。 |
| ng-open | 它指定元素的open属性。 |
| ng-options | 它在<选择>列表中指定<选项>。 |
| ng-paste | 它指定粘贴事件的行为。 |
| ng-pluralize | 它指定了一条消息, 该消息将根据使用中的本地化规则显示。 |
| ng-readonly | 它指定元素的只读属性。 |
| ng-required | 它指定元素的必需属性。 |
| ng-selected | 它指定元素的选定属性。 |
| ng-show | 它显示或隐藏html元素。 |
| ng-src | 它为<img>元素指定src属性。 |
| ng-srcset | 它为<img>元素指定srcset属性。 |
| ng-style | 它指定元素的样式属性。 |
| ng-submit | 它指定在onsubmit事件上运行的表达式。 |
| ng-switch | 它指定将用于显示/隐藏子元素的条件。 |
| ng-transclude | 它指定一个插入被插入元素的点。 |
| ng-value | 它指定输入元素的值。 |
| ng-disabled | 它指定一个元素是否被禁用。 |
| ng-form | 它指定一个HTML表单来继承控件。 |
| ng-model | 它将html控件的值绑定到应用程序数据。 |
| ng-model-options | 它指定如何完成模型中的更新。 |
| ng-mousedown | 它指定有关mousedown事件的行为。 |
| ng-mouseenter | 它指定了mouseenter事件的行为。 |
| ng-mouseleave | 它指定了mouseleave事件的行为。 |
| ng-mousemove | 它指定了mousemove事件的行为。 |
| ng-mouseover | 它指定鼠标悬停事件的行为。 |
| ng-mouseup | 它指定了mouseup事件的行为。 |
| ng-non-bindable | 它指定在此元素或其子元素中不能进行任何数据绑定。 |
| ng-repeat | 它为集合中的每个数据定义模板。 |
如何添加指令
请参阅以下示例：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "This is a directive constructor. "
};
});
</script>
</body>
</html>
评论前必须登录！
注册