这篇主要介绍指令中的templateUrl属性:
templateUrl属性值是一个url路径,路径指向一个html模板,html模板会填充(或替换)指令内容:
比如上一篇文章里的案例,我们把原来的template属性改用为templateUrl属性:
方法一:
html:
<!DOCTYPE html> <html ng-app = 'dirAppModule'> <head> <title>20.2 指令(templateUrl)</title> <meta charset="utf-8"> <script src="angular.js"></script> <script src="script.js"></script> <style type="text/css"> *{ font-family:'MICROSOFT YAHEI'; font-size:12px } h3 { color: #CB2027; } </style> </head> <body> <div> <cd-hello></cd-hello> <div cd-hello></div> <div class="cd-hello"></div> </div> </body> </html>
js:
var dirAppModule = angular.module('dirAppModule',[]); dirAppModule.directive('cdHello',function(){ return { restrict:'EAC', replace:true, templateUrl:'hello.html' } });
hello.html:
<h3>hi,code_bunny</h3>
这样得到的结果和使用template:<h3>hi,code_bunny</h3>得到的结果是一致的.
*以这种方式使用templateUrl属性必须在环境中运行,本地文件是不行的.
方法二:
上面这种方式加载模板,在模板文件比较大,加载需要一定时间的情况下,用户可能先看到标识符,等待模板加载完后才看到内容.如果要避免这种情况,可以使用以下方法:
html:
<!DOCTYPE html> <html ng-app="dirAppModule"> <head> <title>20.3指令</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script type="text/ng-template" id="hello.html"> <h3>hi,code_bunny</h3> </script> <script src="script.js"></script> </head> <body> <cd-hello></cd-hello> <div cd-hello></div> <div class="cd-hello"></div> </body> </html>
js:
/*20.3 指令 */ var dirAppModule = angular.module('dirAppModule',[]); dirAppModule.directive('cdHello',function(){ return { restrict:'EAC', templateUrl:'hello.html', replace:true } });
直接在页面里添加一个script标签,script的type属性为:text/ng-template, script的id属性值自己定义,templateUrl的值就是这个script标签的id属性值,比如这个例子中的hello.html
注意这个script标签是不会发送http请求的.
方法三:
html:
<!DOCTYPE html> <html ng-app="dirAppModule"> <head> <title>20.4指令</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </head> <body> <cd-hello></cd-hello> <div cd-hello></div> <div class="cd-hello"></div> </body> </html>
js:
/*20.4 指令 */ var appModule = angular.module('dirAppModule', []); appModule.run(function($templateCache){ $templateCache.put('hello.html','<h3>hi,code_bunny</h3>') }); appModule.directive('cdHello',function(){ return { restrict:'EAC', templateUrl:'hello.html', replace:true } });
说明: 通过angular创建的模块,都有一个run方法,接受一个函数作为参数.该函数会被执行.
$templateCache是angular内置的一个服务,它的put方法用于存放模板.它接受两个参数,第一个参数为模板的名字,也就是templateUrl的值,这里就是hello.html,第二个参数就是html字符串,也就是模板的内容.
这种方法常用于模板内容是通过$http异步获取的.然后将模板放入$templateCache中以便后面使用.
完整代码:https://github.com/OOP-Code-Bunny/angular/tree/master/OREILLY/20.2%20%E6%8C%87%E4%BB%A4
https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/20.3%20%E6%8C%87%E4%BB%A4.html
https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/20.4%20%E6%8C%87%E4%BB%A4.html
https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/script.js