AngularJs-指令1
前言:
前面写的有些乱,并且有些罗嗦,以后会注意的。希望我写的文章能帮助大家。
1,什么是指令
简单的说,指令是angularjs在html页面中建立一套自己能识别的标签元素、属性、类和注释,用来达到功能复用的目的。
2,创建指令
<!DOCTYPE html> <html ng-app="MyModule"> <head><meta charset="utf-8"><title></title> </head> <body><!-- 指令的第一种模式 E --><hello></hello><!-- 指令的第二种模式 A --><div hello></div><!-- 指令的第三种模式 C --><div class="hello"></div><!-- 指令的第四种模式 M--><!-- directive:hello --><div></div><script src="js/angular-1.3.0.js"></script><script src="js/hello.js"></script> </body> </html>
从上面的代码可以看出,指令有四种创建方式,上面的四种模式对应下面js代码中 restrict属性AEMC。
var myModule = angular.module("MyModule",[]); //创建指令 myModule.directive('hello',function(){return{restrict:'AEMC', // 匹配模式 A:属性 E:元素 M:注释 C:Classtemplate:'<div>hello world</div>',replace:true} })
可以自己动手创建。
3,指令--restrict
restrict意思是约束,限定的意思,在此就是限定这个指令可用的四种匹配模式。
这么多模式,我们该在什么场景下用呢?
- A:属性指令,如果想在已有的标签再添加指令,推荐使用这个方式。
- E:元素指令,官方推荐属性,可以自定义标签显示。
- M:注释指令,一般不使用,容易删除。别人不好理解。
- C:样式类指令,一般不使用,容易误解。
4,指令--template
模板(代码片段)的使用我们有4中方式。
- template:'<div>hello world</div>',把代码片段直接复制给模板属性
- templateUrl:'tmpl/hello.html',引用外部文件,当你的模板有很多代码的时候使用。
- template:$templateCache.get('hello.html'),使用模板缓存,这个方法解决一个模板复用的情况,hello.html是一个虚拟的文件,可不建立
- 模板可以为空,直接在 html文件里面写 <hello>hello</hello>
// 注射器加载所有模块时,此方法执行一次,缓存模板 myModule.run(function($templateCache){// console.log("323"); html文件是虚拟的,可以任意起名字$templateCache.put('hellos.html',"<div>hello everyone..</div>") }) myModule.directive('hello',function($templateCache){return{restrict:'AECM',template:$templateCache.get('hellos.html'),replace:true} })
5,指令--replace
replace意思替换,代替的意思。如果进行指令嵌套的时候,需要改变下。
html:
<hello><div>nihao</div></hello>
js:
myModule.directive('hello',function(){return{restrict:'AE',transclude:true,template:'<div>hello everyone <div ng-transclude></div></div>',} })
在这里使用了 ng-transclude 方法,这个方法的作用是让angularjs把指令嵌套的内容放到 带有ng-transclude属性的标签中去。
6,指令--compile(编译阶段)
angularjs默认的函数,我们可以自定义该函数,当指令dome变化完毕就会执行。
7,指令--link(链接阶段)
在link函数里面可以给元素绑定事件。
8,总结
关于指令的其他属性和方法,需要大家到官网去找自己看。我这边也会把这节代码上传到我的github(https://github.com/NIKing/angularJs.git)上。
转载于:https://www.cnblogs.com/zhiyuan-2011/p/4248358.html
AngularJs-指令1相关推荐
- AngularJS 指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
- AngularJS指令封装高德地图组件
2019独角兽企业重金招聘Python工程师标准>>> 1 概述 公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图 ...
- 如何调用AngularJS指令中定义的方法?
本文翻译自:How to call a method defined in an AngularJS directive? I have a directive, here is the code : ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- AngularJS 指令实践指南(二)
这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope.第二部分将承接上一篇继续介绍.首先,我们会看到在使用隔离scope的情况下,如何从指令 ...
- Polymer元素和AngularJS指令有什么区别?
本文翻译自:What is the difference between Polymer elements and AngularJS directives? On the Polymer Getti ...
- AngularJS指令范围中的#39;@#39;和#39;=#39;有什么区别?
本文翻译自:What is the difference between '@' and '=' in directive scope in AngularJS? I've read the Angu ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用 ...
- AngularJS 指令实践
2019独角兽企业重金招聘Python工程师标准>>> 指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经 ...
- AngularJS 指令中的require
require参数可以被设置为字符串或数组,字符串代表另外一个指令的名字.require会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数. 字符串或数组元素的值是会在当前指令的 ...
最新文章
- 2018-3-18Zookeep
- 测试人员必学的软件快速测试方法(三)
- vc2010访问局域网mysql_VC2010利用MySQL++访问mysql. 及连接池示例
- ComeFuture英伽学院——2019年 全国大学生英语竞赛【C类初赛真题解析】大小作文——详细解析
- Scanner读取一个int数组
- sit是什么环境_软件环境常识 --dev sit uat
- 玩客云刷Armbian5.9.0安装青龙提示“面版解决服务异常,请手动执行ql check检查服务状态”
- 周立功串口服务器维修方法,周立功医生| 告诉你RS485通信的小秘密
- 芯片架构--四大处理器架构
- 激荡2020——四大通信设备商年报分析
- kafka的Leader选举机制
- 核心交换机、汇聚交换机、接入交换机功能详解
- 计算机桌面可装在其它盘吗,教大家如何把桌面保存到C盘以外的其他盘里,让电脑飞速转起来...
- cad图形不见了怎么办_CAD画图突然消失 怎么找回
- word embedding(详细讲解word embedding)
- 博客匿名评论功能正式上线了!
- 域环境SID相同到底有什么影响?
- 人生历程3——华为赋予我的奋斗价值观责任感(回忆录)
- 区块链 :拜占庭将军问题 [BFT]
- 无障碍(二)检测与防范
热门文章
- java输入方法有哪些内容_java中输入一个字符的方法有哪些
- 左移寄存器vhdl_用VHDL实现的通用循环移位寄存器
- form里面的action和method(post和get的方法)使用
- svn利用钩子post-commit自动更新到线上测试服务器
- 【好文翻译】二十年来我得到的20条编程经验
- 谢谢有你【我与51CTO一“七”成长】
- 【鱼眼镜头5】[中央全向相机畸变模型]:统一相机模型,四阶多项式对统一相机模型进行建模
- 2月21 深度优先与广度优先
- 第四季-专题16-触摸屏驱动程序设计
- 【OpenCV】立体匹配算法SSD、NCC、ASW的基础实现