欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【整理AngularJS中的一些常用指令】，下面是详细的讲解！
整理AngularJS中的一些常用指令
AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令：
- ng-app - 该指令启动一个AngularJS应用。
- ng-init - 该指令初始化应用程序数据。
- ng-model - 此指令定义的模型，该模型是变量在AngularJS使用。
- ng-repeat - 该指令将重复集合中的每个项目的HTML元素。
ng-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-init="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=""> ... <p>Enter your Name: <input type="text" ng-model="name"></p> </div>
ng-repeat 指令
ng-repeat 指令重复html元素集合中的每个项目。在下面的例子中，我们已经迭代了数组countries。
<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>
</div>
例子
下面的例子将展示上述所有指令。
testAngularJS.html
<html>
<title>AngularJS Directives</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
<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.2.15/angular.min.js"></script>
</body>
</html>
输出
在Web浏览器打开textAngularJS.html。输入姓名并看到以下结果。
关于整理AngularJS中的一些常用指令的用户互动如下：
相关问题：为什么使用AngularJS 指令
答：使用过 AngularJS 的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能，并且AngularJS 是目前唯一提供Web应用可复用能力的框架。 目前有很多JavaScript. 产品提供插件给Web开发人员。例如， Bootstrap ... >>详细
相关问题：AngularJS的指令 compile和link的区别及使用示例
答：如果我想实现这样一个功能，当一个input失去光标焦点时(blur)，执行一些语句，比如当输入用户名后，向后台发ajax请求查询用户名是否已经存在，好有及时的页面相应。 输入 camnpr angularjs directive input focus 失去焦点后提示 camnpr 这个用... >>详细
相关问题：如何在AngularJS指令中创建controller与ngModel进...
答：正如很多文章所说的一样，指令是AngularJS的灵魂，只有真正熟练掌握了Angular 指令，才有希望成为AngularJS高手。在编写Angular指令时，我们最常用到的就是其中的link函数，它用来与scope中的数据进行交互并绑定一些事件，例如click等等。但是如... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-