angular自定义指令

angular自定义指令

angularJS 中内置了很多指令，但是有时候这些内置的指令满足不了我们的需求，这时候我们就需要自己定义指令，angular中提供了自定义的指令的方法，使用关键字directive,下面介绍一下他的参数：

参         数描         述template这是自定义指令的模板，一般放html文件。replacetrue/false 为true时表示替换使用指令的标签，用template的内容完全替换。为false时，在使用指令的标签内部添加template的内容，为true时，模板（template）必须有一个根节点。transcludetrue/false 这个要在模板中配合ng-transclude一起使用，为true时代表要保留使用指令的标签内部的内容。restrict匹配模式，表示定义的指令以哪种方式使用，它有四个值，E(ele)/A(attr)/C(class)/M(mark注释前提replace:true)scopetrue创建独立的scope,（创建的指令可以双向绑定数据而对指令的其他使用没有影响）；值也可以是一个对象，用来绑定属性或函数：@ ：把当前属性作为字符串传递，还可以绑定来自外层scope上的值，在属性中插入{{}}即可；=： 与父scope中的属性进行双向绑定；&：传递一个来自父scope中的函数，稍后调用。link如果需要操作DOM，要在link的函数中；参数有scope(指令对应的scope对象),element（指令所在DOM对象的jqLite对象，）,attrs（指令所在DOM对象的属性集）,controller（控制器的实例，在所有指令间共享，可以作为指令交流的通道）

指令的原理：1.加载  加载angular.js，找到ng-app之后，确定应用的边界。2.编译  遍历DOM，找到所有指令，根据指令中的template、replace和transclude转换DOM结构，如果存在compile函数就调用。3.链接  对每个指令操作link函数，link函数一般用来操作DOM,绑定事件监听器。> 注：自定义指令的名称不能采用驼峰命名法下面是示例：<h1 apdir1>这是装饰型指令</h1><h2 apdir2>这是组件型指令</h2><apdir2></apdir2><div apdir3>保留这几个文字</div> var app = angular.module('app',[]);//装饰性指令app.directive('apdir1',function(){    return {        link:function(scope,ele,attrs){            ele.on('mouseover',function(){                ele.css({'color':'red'})            }).on('mouseout',function(){                ele.css({'color':'green'})            })        }    }});//组件性指令app.directive('apdir2',function(){    return {        //替换指令所在的标签，以模板代替,模板必须有一个根节点        replace: true,        template:'<h4>hello</h4>',        //指令使用的类型 E:作为标签使用 A:作为属性使用 C:作为class类名使用  D:作为注释使用        restrict:'EACM',        //保留使用指令的标签内部的元素。        transclude: true    }});app.directive('apdir3',function(){    return {        //保留使用指令的标签内部的元素。        transclude: true,        replace: true,        template:'<h4>hello<div ng-transclude></div></h4>',        restrict:'EACM',    }})