angularjs指令 angularjs指令|AngularJS教程

本文概述

直接应用指令
热指令
指令建模
重复指令
AngularJS指令示例
AngularJS指令列表
如何添加指令

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>

热指令【angularjs指令】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>