AngularJs学习之指令编写

2017-01-20

前言

（1）在controller写业务逻辑（我们明白业务逻辑大部分是放在服务中），这里所说的业务逻辑乃是为呈现视图之前而准备的数据或者是与其他指令进行数据交互而暴露这个api

（2）在link中主要操作DOM

开始

1.指令的定义：

.directive('hello',function(){
	return {
		restrict:'AECM',
		template:'<label>hello world</label>'
	}
})

这是一个最简单的指令，在这个指令中，restrice用来规定指令的使用方式，A（attribute）代表指令以属性方式调用，例如：

1	<div hello></div>;

E(element)代表指令以元素名的方式调用，例如：

1	<hello></hello>;

C(class)代表指令以类名方式调用，例如：

1	<div class="hello"></div>;

M代表指令以注释的方式调用，例如：

1	<!-- hello -->;

template后跟的为html片段，同理的作用还有templateUrl,templateUrl后跟一个html链接，其内也是一段html片段；
replace后跟true或false，意思为是否替换掉调用指令处的html元素；
scope属性代表指令的作用域；有三种取值：false，true，{}；默认为false，代表与父作用域共享；true代表创建一个继承于父scope的scope；{}创建一个独立的作用域，如果需要使用父作用域的属性或方法可以使用“@”，“=”，“&”，“@”实现的是单向绑定，“=”实现的是双向绑定，而使用“&”，代表的是调用父作用域的方法；
transclude属性代表是否允许指令中插入任意内容，例如transclude为true时可以这样cdio；
compile有两个参数，一个element，一个attrs；element指指令所在的元素，compile返回一个方法或者对象，也可以在这里操作dom元素
link包含三个参数：scope，attrs，element；正如开篇提到的，link函数用于操作dom元素；
controller同时也可以与其它指令交互，当别的指令与本指令交互时，对应的指令需要声明本指令的实例（require:’^本指令名称’)