AngularJS入门心得3——HTML的左右手指令
在《AngularJS入门心得1——directive和controller如何通信》我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。这里AngularJS就应运而生,弥补了HTML的天然缺陷,用于构件Web应用等。”
那么AngularJS如何弥补HTML的缺陷,指令可能是最好的回答。
指令是什么???
指令就是一些附加在HTML元素上的自定义标记(可以是属性A、元素E、css类C),可以通过AngularJS的HTML编译器($compile)对这些标记附加指定的行为,或者操作DOM、改变DOM元素等。
说白了,就是HTML定义的标签不够多,不够强大,AngularJS通过指令可以让HTML识别更多的标签,具备更强的功能。
1.指令的规范化
在HTML命名规范中,因为不区分大小写,所以类似myCustomer和mycustomer是一样的,那么如何在HTML定义指令呢,常见的可以通过
(1) 加前缀:”x-“和”data-”
(2) 在指令名之间添加间隔符:”:”,”-”,”_”
那么如何将HTML中的指令名转化为js中的变量,相应的,有两种方式:
(1) 从元素或属性的名字前面去掉x- and data-
(2) 从:, -, 或 _分隔的形式转换成小驼峰命名法(camelCase)
举例:
HTML(通过分隔符标示):
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Example - example-example11-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head> <body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<div my-customer></div>
</div>
</body> </html>
HTML(通过前缀标示):
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Example - example-example11-production</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head> <body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<div data-my-customer></div>
</div>
</body> </html>
script.js:
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
})(window.angular);
通过在Plunker中的实时显示结果如下:
(ps:Plunker介绍
简介:Plunker is an online community for creating, collaborating on and sharing your web development ideas. Plunker 是一个用来创建、协作和分享 Web 开发思路的在线社区。
官网地址:http://plnkr.co/
特点:
基于 Node.js 环境运行
实时的代码协作
全功能、可定制语法编辑器
代码更改可即时预览效果
代码提示
可 Fork、评论和分享
完全开源,使用 MIT 许可
)
2.指令匹配
AngularJS的$complie编译器可以基于元素、属性、类名以及注释来匹配指令。如:
<my-customer></my- customer >//元素 <span my- customer ="exp"></span>//属性 <!-- directive: my- customer exp -->//注释 <span class="my- customer: exp;"></span>//类名
注意:虽然上面的4种形式都可以进行指令匹配,但是,最好通过标签名和属性来使用指令而不要通过注释和类名。这样做可以更容易地看出一个元素是跟哪个指令匹配的。举例来说:
(1)通过元素匹配
index.html:
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Example - example-example11-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script> </head> <body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<my-customer></my-customer>
</div>
</body> </html>
script.js:
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
})(window.angular);
在html中声明元素标签<my-customer></my-customer>,在js中通过”restrict:‘E’”表示是通过元素来匹配。
(2)通过属性匹配
index.html
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Example - example-example11-production</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script> </head> <body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<div my-customer></div>
</div>
</body> </html>
script.js:
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
restrict: 'A',
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
})(window.angular);
在html中声明元素标签<div my-customer></div>,标签div中声明了属性my-customer,在js中通过”restrict:‘A’”表示是通过元素来匹配。
当然,以上的页面显示结果都是:
其实本篇本来是要重点说说scope的理解以及举个例子来聊聊独立scope的一些机制,但是梳理一下就写完了这篇。
最近一直在熟悉业务,一直也没有跟进AngularJS,倒是在重新认识Javascript,只能说之前对于js的理解实在太浅,后面有时间会继续跟进javascript。
本文链接:《AngularJS入门心得3——HTML的左右手指令》
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!如果您想持续关注我的文章,请扫描二维码,关注JackieZheng的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。
友情赞助
如果你觉得博主的文章对你那么一点小帮助,恰巧你又有想打赏博主的小冲动,那么事不宜迟,赶紧扫一扫,小额地赞助下,攒个奶粉钱,也是让博主有动力继续努力,写出更好的文章^^。
1. 支付宝 2. 微信
AngularJS入门心得3——HTML的左右手指令的更多相关文章
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- (一)Angularjs - 入门
AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手 ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分 ng-model: 这个指定定义并绑定Ang ...
- 【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
- 《AngularJS入门与进阶》图书简介
一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...
- 跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
- angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】
事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...
- angularJS入门小Demo【简单测试js代码的方法】
1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...
随机推荐
- 播放一个视频并用滚动条控制进度-OpenCV应用学习笔记二
今天我们来做个有趣的程序实现:利用OpenCV读取本地文件夹的视频文件,并且在窗口中创建拖动控制条来显示并且控制视频文件的读取进度. 此程序调试花费了笔者近一天时间,其实大体程序都已经很快写出,结果执 ...
- 如何让ECSHOP不同的分类调用不同模板方法
如何给ecshop商品分类,显示不同的模板的话.可以通过不同的分类ID来取得不同模板.我们可以通过分类ID来判断,比如分类为1的,调用cat1.dwt.分类为2的,调用cat2.dwt,我们在cate ...
- windows management instrumentation服务未启动-解决脚本
桌面新建.txt文件 将以下代码放入 保存为.bat文件 执行即可 @echo on cd /d c:\temp if not exist %windir%\system32\wbem goto Tr ...
- jquery 获取 scrollHeight
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:匿名用户链接:http://www.zhihu.com/question/20985674/answer/16807177来源 ...
- SQL 数据库性能问题排查
一个项目的运行,总伴随着性能问题,系统查询过慢,如何快速查询等 下面将简单讲解一下,如何去排查及解决这些问题. 开发过程中: 1:不要绝对的三范式,适当建立冗余能够提高查询速度,不用多表关联 2:能用 ...
- Xamarin开发Android笔记:拍照或相册选取图片角度问题
在开发Android应用的时候,可能会遇到类似微信朋友圈中拍照或相册选取图片的场景,拍照或选取图片之后在显示的时候却发现图片的角度不对,明明是竖版拍照,显示出来缺失躺着的. 这是因为在某些特定手机上例 ...
- AMD加载器实现笔记(四)
继续这一系列的内容,到目前为止除了AMD规范中config的map.config参数外,我们已经全部支持其他属性了.这一篇文章中,我们来为增加对map的支持.同样问题,想要增加map的支持首先要知道m ...
- 《kali linux 渗透测试初级教程》免费下载
Kali Linux系列教程是在51cto上售卖的入门教程,售价100元.每天都有很多网友找我要全部教程,也有人偷偷的录制了教程.索性公开出来,如果您觉得还可以的话,希望可以选择发个小红包或者转发 获 ...
- java实现输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数。
package JingDian; import java.util.Scanner; public class charKind { public static void main(String[] ...
- XP之后Windows的一些变化
看到很多Windows开发人员,尤其是C++程序员思维还是停留在XP操作系统,当然根据工作是否需要新知识 ,这本身没有错.但是实际上Vista之后的Win7, 再之后的Win8 ,Windows已经发 ...