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 读取操作Sql中的Xml字段
Oct 09 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
详解JavaScript中return的用法
May 08 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
基于react组件之间的参数传递(详解)
Sep 05 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 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
PHP校验ISBN码的函数代码
2011/01/17 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
js调用css属性写法
2013/09/21 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
使用angular写一个hello world
2015/01/23 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
python控制台显示时钟的示例
2014/02/24 Python
Python 使用多属性来进行排序
2019/09/01 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
应届生船舶驾驶求职信
2013/10/19 职场文书
结构工程个人自荐信范文
2013/11/30 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
教师评语大全
2014/04/28 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
环境保护建议书
2014/08/26 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
i7 6700处理器相当于i5几代
2022/04/19 数码科技