个AngularJS指令在HTML代码中可以有四种表现形式:
1、作为一个新的HTML元素来使用
2、作为一个元素的属性来使用
3、作为一个元素的类来使用
4、作为注释来使用
一。创建指令
angular.directive("directiveName", directiveFactory);
第一个参数是指令名,第二个参数指令配置函数
配置函数里的属性有 :
angular.module('app', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function(tElement, tAttrs) {...}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs: String, require: String, link: function(scope, iElement, iAttrs) { ... }, compile: // 返回一个对象或连接函数,如下所示: function(tElement, tAttrs, transclude) { return { pre: function(scope, iElement, iAttrs, controller) { ... }, post: function(scope, iElement, iAttrs, controller) { ... } } return function postLink(...) { ... } } }; });
1 restrict[string]:规定指令在HTML中的表现形式。A代表属性、E代表元素、C代表类、M代表注释。
2 template[string or function]
templateUrl:用它来指向一个外部的文件地址,所以我们通常把模板放在外部的一个HTML文件中,然后使用templateUrl来指向他
3 link[function]属性 :函数,它包括三个参数:scope、element、attrs。link函数主要是用来添加对DOM元素的事件监听、监视模型属性变化、以及更新DOM的。
4 scope[boolean or object]:该属性是用来定义指令的scope的范围,默认情况下是false,也就是说该指令继承了父controller的scope,可以随意的使用父controller的scope里的属性,但是这样的话就会污染到父scope里的属性。所以我们可以让scope取以下两个值:true和(对象){}。
当为true的时候,表示让Angular给指令创建一个继承于父scope的scope。
-----------------
scope属性:
取值为false:指令不创建新作用域,继承父controller的scope
取值为true:指令创建新作用域,不继承了父controller的scope
取值为对象时--孤立作用域
孤立作用域:虽然指令是个 孤立的个体,但很多时候需从父作用域获取信息,scope对象属性,相当于指令对外接口,将孤立作用域的属性与外部作用域属性值绑定。
@ 或 @attr 将孤立作用域成员与 父作用域属性单向绑定
= 或 =attr 将孤立作用域成员与 父作用域属性双向绑定
& 或 &attr 将孤立作用域成员与 父作用域方法双向绑定
<div id="comp"> <div my-greeting="{{directContent}}"></div> </div>
创建一个属性形式myGreeting指令(html不区分大小写,以横线形式书写;而ng中,驼峰式)
scope :{ mydirect : @, directContent : "@mydirect" }
scope取值为非空对象,则创建一个孤立作用域,@表示与 父作用域属性单向绑定
------------
controller属性:String or function(scope, element, attrs, transclude, otherInjectables) { ... }
当前指令所依赖的其他指令的控制器实例,用于多个嵌套指令之间 的相互通信。需与指令配置对象的require属性一同使用
-----------------------
当指令需要给外部暴露一些方法或数据时,用controller
但对指令内部进行操作时 用link
-----------------------
compile属性
compile:function(tElement, tAttrs, transclude)
用于处理需要修改模板DOM的。
设置了complie后,指令配置对象中的link属性会被忽略掉,不再执行(这与指令编译执行过程有关),
而是执行compile属性函数返回的link函数。
注 : compile里不要执行任何DOM变形之外的操作(性能 安全问题)
tElement :指令所在的元素DOM;
tAttrs: 这个元素上的所有属性
----------------------------
link属性
link一般用来操作DOM、绑定事件监听