angularJS自定义指令中,设置指令的属性template可以定义需要的dom元素,除了使用template,还可以用templateUrl,这个templateUrl可以设置为一个页面的相对路径,如:templateUrl : ' tmp/other.html ' ,意为使用other.html的内容作为模板dom。 或者把templateUrl设置为一个id,如:templateUrl : ' customDiv2 ' ,意为使用customDiv2的内容作为模板dom,但要注意customDiv2标签是这样的:
<script type="text/ng-template" id="customDiv2"><div>hello {{name}} customDiv2内容</div></script>
示例:
文件结构:
index.html:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../../vendor/angular/angularjs.js"></script><script src="app/index.js"></script></head><body><div ng-app="myApp"><div ng-controller="firstController"><h3>custom-tags指令:</h3><custom-tags></custom-tags><br><h3>custom-tags2指令:</h3><custom-tags2></custom-tags2></div><!--custom-tags2指令的dom模板--><script type="text/ng-template" id="customDiv2"><div>模板customDiv2的内容 {{name}}</div></script></div></body></html>
other.html:
<div>other页面的内容 {{name}}</div>
index.js:
angular.module('myApp',[]).directive('customTags',function(){return {restrict:'ECAM',templateUrl:'tmp/other.html', //用法1,以另一个页面为模板,注意相对路径是针对index.html的replace:true}}).directive('customTags2',function(){return {restrict:'ECAM',templateUrl:'customDiv2', //用法2:以id="customDiv2"的元素为模板replace:true}}).controller('firstController',['$scope',function($scope){$scope.name='张三';}]);
运行index.html结果:
如果觉得《angularJS 自定义指令 属性:templateUrl》对你有帮助,请点赞、收藏,并留下你的观点哦!