angularjs中的指令全面解析(必看)_angularjs

3、体他是怎么來定义的呢？.directive(Jhello',function(){return{restrict:'AECM',template:'clickme，})上而就是定义一个指令最简单的代码了，没有乙一。在上而的代码directive()这个方法定义了一个新的指令，该方法有两个参数，笫一个'hello'就是规定指令的名字为hello,第二个参数是返回指令对象的函数。那么在上面的代码屮，该函数主要使用了两个属性来定义这个hello指令：1、restrict[string]这个

4、属性，主要是用来规定指令在IITML代码中可以使用什么表现形式。A代表屈性、E代表元素、C代表类、M代表注释。实际情况小我们一般使用AE这两种方式。2、template[stringorfunction]这个属性,规定了指令被Angular编译和链接(link)后生成的HTML标记，这个属性可以简单到只有一个HTML文本在里面，也可以特别复杂，当该属性的值为function的时候，那么该方法返回的就是代表模板的字符串，同时也可以在里面使用{{}}这个表达式。template:function(){return'〈bu

5、tton>clickme';}但是在一般情况下，template这个屈性都会被tcmplatcUrl取代掉，用它来指向一个外部的文件地址，所以我们通常把模板放在外部的一个HTML文件中，然后使用templateUrl來指向他。在定义指令的吋候，除了以上两个最基础的属性外，我们还会使用到其他的很多属性，那么下面我们就來一一的说下：1、priority[number]屈性，这个屈性是來规定口定义的指令的优先级的，当一个D0M元素上而冇一个以上的指令的时候，就需要去比较指令的优先级了，优先级高的指令先执行

6、。这个优先级就是用来在执行指令的comp订e函数前，先排序的，那么关于comp订e这个函数，我们会在下面仔细的说下。2、terminal[boolean]属性，该参数用来定义是否停止当前元素上比本指令优先级低的指令，如果值为true,就是正常情况，按照优先级高低的顺序来执行，如果设置为false,就不会执行当前元索上比本指令优先级低的指令。3、replace[boolean]属性，这个属性用来规定生成的HTML内容是否会替换掉定义此指令的HTML元素。当我们把该属性的值设为true的吋候，打开控制台看看你会发现这个指

7、令生成的元索会是这样的：buttonclickme/button当我们设置为false的时候会是这样的:▼hello4、link[function]属性,在上面的例子中,我们自定义的指令其实没有多大意义，这只是一个最简单的指令，有好多的属性我们都没有为他定义，所以没有多大用途。比如这个link函数，它包括三个参数：scopc>clcmcnt>attrso这个link函数主要是用来添加对DOM元索的事件监听、监视模型属性变化、以及更新D0M的。它里面三个参数：一

8、：scope参数,在我们没有为指令定义scope属性的时候，那么他代表的就是父control1er的scope。—：element参数，就是指令的jQLitc(jQucry的子集)包装DOM元素。如果你在引入AngularJSZ前引入了jQuery,那么这个元素就是jQuery元素，而不是jQLite元素。由于这个元素已经被jQuery/jQL