angularJs中自定义指令transclude与templateUrl详解

默认情况下，自定义指令里模板的部分会替换掉指令所使用的所有内容，那么，如果想保留这些内容，就要使用transclude属性。

1.html

<div ng-app="module">
<div my-exam>你好</div>
</div>
<script>
var m = angular.module('module', []);
m.directive('myExam', [function () {
return {
restrict: 'EA',
template: '<h1><div ng-transclude=""></div>欢迎浏览泠泠在路上</h1>',
/*transclude为true时，可以让 <div my-exam>你好</div>内容在template中的 <div ng-transclude=""></div>位置处显示出来*/
transclude:true,

}
}]);
</script>

效果图：



templateUrl是指令模板地址的属性，一般单独建一个文件夹，命名和指令的命名相同，以防出现问题。

2.html

<div ng-app="module">
<div my-exam>你好</div>
</div>
<script>
var m = angular.module('module', []);
m.directive('myExam', [function () {
return {
restrict: 'EA',
templateUrl:'view/myexam.html',
/*在使用templateUrl时，使用了replace:true，需要在myexam.html文件中有一个顶层容器，即内容可以被<div></div>或其他容器包裹，不然会报错*/
replace:true,
}
}]);
</script>

myexam.html

<h1>这是myexam指令的模板</h1>

效果图：