AngularJS入门教程之AngularJS指令


Posted in Javascript onApril 18, 2016

熟悉HTML的朋友都知道,HTML有很多属性。比如<a>标签的href属性可以来指定链接的URL地址,<input>标签的type属性可以用来指定input的类型。AngularJS指令就是通过扩展HTML的属性来为 AngularJS应用增加功能。

AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令:

常用AngularJS指令

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

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>

AngularJS指令示例

<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>
</div>

ng-app 指令告诉 AngularJS当前<div> 元素是 一个AngularJS 的应用程序,ng-init指令用于初始化数据,相当于javascript中的定义变量。AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。{{ firstName }} 是通过ng-model="firstName" 进行同步。上面的例子将会在页面上同步显示你在输入框中输入的内容。

注意

一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。
使用 ng-init 初始化数据并不是很常见。您将在后续章节中学习到一个更好的初始化数据的方式。

ng-repeat 指令

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>
<li>Jani</li>
<li>Hege</li>
<li>Kai</li>
</ul>

ng-repeat作用在对象数组上:

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>

将会解析成下面的HTML:

<ul>
<li>Jani, Norway</li>
<li>Hege, Sweden</li>
<li>Kai, Denmark</li>
</ul>

自定义指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。 你可以使用 .directive 函数来添加自定义的指令。 要调用自定义指令,HTMl 元素上需要添加自定义指令名。 使用驼峰法来命名一个指令, askh5Directive, 但在使用它时需要以 - 分割: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>

属性:<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指令,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 兼容各个浏览器的事件
Feb 04 Javascript
纯javascript制作日历控件
Jul 17 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
leaflet的开发入门教程
Nov 17 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 #Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 #Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 #Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 #Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 #Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 #Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 #Javascript
You might like
截获网站title标签之家内容的例子
2006/10/09 PHP
PHP自定义函数收代码
2010/08/01 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python实现计算最小编辑距离
2016/03/17 Python
pandas通过索引进行排序的示例
2018/11/16 Python
pygame实现五子棋游戏
2019/10/29 Python
Django 再谈一谈json序列化
2020/03/16 Python
Django设置Postgresql的操作
2020/05/14 Python
银行实习生的自我评价
2014/01/13 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
施工安全协议书
2016/03/22 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android