Directive指令的template配置项使用说明

Posted 2020-10-21 Yogic

template------（字符串或者函数）可选参数

     1.字符串

<hello-world></hello-world>

var app = angular.module(‘myApp‘, []);

app.directive(‘helloWorld‘, function() {

 return {

　　　 restrict:"EA",

 template: ‘<div><h1>你好！</h1></div>‘,

 replace: true//替换

 };

});

    2.一个函数，可接受两个参数tElement和tAttrs

其中tElement是指使用此指令的元素，而tAttrs则实例的属性，它是一个由元素上所有的属性组成的集合（对象）形如：
<hello-world2 title = ‘我是第二个directive‘></hello-world2>  
其中title就是tattrs上的属性

　　<hello-world2 title = ‘我是第二个directive‘></hello-world2

var myapp=angular.module("app",[]);

myapp.directive("helloWorld2",function($compile){

　　return{

　　　　restrict:"EA",

　　　　template:function(tElement,tAttrs){

　　　　　　var html="";

　　　　　　html+="<div>"+tAttrs.title +"</div>";

　　　　　　return html;

　　　　}

　　}

})