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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
简单通用的JS滑动门代码
Dec 19 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
js操作滚动条事件实例
Jan 29 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
vue中nextTick用法实例
Sep 11 Javascript
JS制作简易计算器的实例代码
Jul 04 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
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
python reduce 函数使用详解
2017/12/05 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
web页面录屏实现
2019/02/12 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
师范院校学生自荐信范文
2013/12/27 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
《问银河》教学反思
2014/02/19 职场文书
教师产假请假条范文
2014/04/10 职场文书
促销活动总结模板
2014/07/01 职场文书
见习期个人总结
2015/03/05 职场文书
Oracle笔记
2021/04/05 Oracle