首页 > 代码库 > angular学习笔记(三十)-指令(3)
angular学习笔记(三十)-指令(3)
这篇主要介绍指令中的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
angular学习笔记(三十)-指令(3)