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 相关文章推荐
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
js 数据类型判断的方法
Dec 03 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
十天学会php之第一天
2006/10/09 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php防止sql注入简单分析
2015/03/18 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
php微信开发之上传临时素材
2016/06/24 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
详解Python中的__init__和__new__
2014/03/12 Python
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
研究生自荐信
2013/10/09 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
党员公开承诺书内容
2014/05/20 职场文书
个人先进事迹材料
2014/12/29 职场文书
自考生自我评价
2019/06/21 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
Python&Matlab实现樱花的绘制
2022/04/07 Python
python创建字典及相关管理操作
2022/04/13 Python