標籤：style blog http color os io 使用 ar 檔案
這篇主要介紹指令中的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)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
