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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
Javascript中的解构赋值语法详解
Apr 02 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
几个php应用技巧
2008/03/27 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
php cookie 详解使用实例
2016/11/03 PHP
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
详解Django中的权限和组以及消息
2015/07/23 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python unittest实现api自动化测试
2018/04/04 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
房地产开发项目建议书
2014/05/16 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书