《AngularJS入门教程之AngularJS指令_.docx》由会员分享，可在线阅读，更多相关《AngularJS入门教程之AngularJS指令_.docx（8页珍藏版）》请在三一文库上搜索。
1、AngularJS入门教程之AngularJS指令_ 熟识HTML的伴侣都知道，HTML有许多属性。比如a标签的href属性可以来指定链接的URL地址，input标签的type属性可以用来指定input的类型。AngularJS指令就是通过扩展HTML的属性来为 AngularJS应用增加功能。 AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特别属性。我们将商量以下指令： 常用AngularJS指令 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-
2、app指令 ng-app 指令启动一个AngularJS应用。它定义根元素。它会自动初始化或启动加载包含AngularJS应用程序的Web页面的应用程序。它也被用来加载各种AngularJS模块AngularJS应用。在下面的例子中，我们定义默认AngularJS应用用法div元素的ng-app 属性。 div ng-app= . /div ng-init 指令 ng-init 指令初始化一个AngularJS应用程序的数据。它被用来把值在应用程序中用法的变量。在下面的例子中，我们将初始化countries数组。用法JSON语法来定义countries数组。 div ng-app= ng-in
3、it=countries=locale:en-US,name:United States, locale:en-GB,name:United Kingdom, locale:en-FR,name:France . /div ng-model指令 ng-model指令定义在AngularJS应用中用法的模型/变量。在下面的例子中，我们定义了一个名为“name”的模型。 div ng-app= . pEnter your Name: input type=text ng-model=name/p /div ng-repeat 指令 ng-repeat 指令重复html元素集合中的每个项目。在下面的
4、例子中，我们已经迭代了数组countries。 div ng-app= . pList of Countries with locale:/p ol li ng-repeat=country in countries Country: + country.name + , Locale: + country.locale /li /ol /div AngularJS指令示例 div ng-app= ng-init=firstName=John p在输入框中尝试输入：/p p姓名：input type=text ng-model=firstName/p p你输入的为： firstName /p
5、/div ng-app 指令告诉 AngularJS当前div 元素是 一个AngularJS 的应用程序，ng-init指令用于初始化数据，相当于javascript中的定义变量。AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。 firstName 是通过ng-model=firstName 进行同步。上面的例子将会在页面上同步显示你在输入框中输入的内容。 留意 一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。 用法 ng-init 初始化数据并不是很常见。您将在后续章节中学习到一个更好的初始化数据的方式。 ng-rep
6、eat 指令 ng-repeat 指令会重复一个 HTML 元素，相当于javascript里的each循环 div ng-app= ng-init=names=Jani,Hege,Kai p用法 ng-repeat 来循环数组/p ul li ng-repeat=x in names x /li /ul /div 上面的例子中将会解析成下面的HTML ul liJani/li liHege/li liKai/li /ul ng-repeat作用在对象数组上： div ng-app= ng-init=names= name:Jani,country:Norway, name:Hege,coun
7、try:Sweden, name:Kai,country:Denmark p循环对象：/p ul li ng-repeat=x in names x.name + , + x.country /li /ul /div 将会解析成下面的HTML： ul liJani, Norway/li liHege, Sweden/li liKai, Denmark/li /ul 自定义指令 除了 AngularJS 内置的指令外，我们还可以创建自定义指令。 你可以用法 .directive 函数来添加自定义的指令。 要调用自定义指令，HTMl 元素上需要添加自定义指令名。 用法驼峰法来命名一个指令， ask
8、h5Directive, 但在用法它时需要以 - 分割：askh5-directive body ng-app=myApp askh5-directive/askh5-directive script var app = angular.module(myApp, ); app.directive(askh5Directive, function() return template : h1自定义指令!/h1 ; ); /script /body 上面的例子解析成: h1自定义指令!/h1 可以通过以下几种方式来调用指令： 元素名：askh5-directive/askh5-directive
9、 属性：div askh5-directive/div class名：div class=askh5-directive/div 说明：!- 指令: askh5-directive - restrict限制用法 restrict 值可以是以下几种: E 只限元素名用法 A 只限属性用法 C 只限类名用法 M 只限说明用法 restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。 var app = angular.module(myApp, ); app.directive(askh5Directive, function() return restrict : A, template : h1自定义指令!/h1 ; ); 上面的AngularJS将只允许属性调用。 以上内容是我给大家介绍的AngularJS入门教程之AngularJS指令，盼望对大家有所关心！ .