angularjs指令系统系列课程(2):优先级priority,模板template,模板页templateUrl

时间:2020-11-29 22:28:20

今天我们先对 priority,template,templateUrl进行学习

1.priority

 可取值:int

 作用:优先级

 一般priority默认为0,数值越大,优先级越高。当一个dom元素上有多个指令,在执行compile函数的时候,指令的执行顺序为:高优先级,先链接排序的先执行

如果想让一个指令最后一个执行:

 terminal 这个参数设置为true,即可使该指令在同一个Dom元素上的指令列表里最后一个执行

2.template

可取值:string或function

作用:指令操作元素的内容

例如:

js

angular.module('app',[])

.directive('helloDirective',function(){ 

  return{
    template:'<div>hello Directive</div>'
  }
});

或者

angular.module('app',{})
.directive('helloDirective', function() {
return {
template: function() {
return '<div>hello Directive</div>';
}
}
});

html:

<section ng-app>
<div id="hellodiv" hello-directive></div>
</section>

这样目标div,也就是指令作用的div 就会被填充template模板里面的内容

运行后html代码生成为:

<section class="ng-scope">
<div hello-directive="">
<div>hello Directive</div>
</div>
</section>

3.templateUrl

可取值:string或function

作用:指令操作元素的内容

该参数的功能和template一样,只是该参数的值为一个模板html的链接 或者一个返回链接的函数