當使用 Angular 表達式(Angular Expressions)在非元素屬性中時,表達式語法得用 {{ 及 }} 來包裹。這樣的用法可以把它當成是前端的模板語法來使用,但...很有可能會跟一些後端程式,像是 Django、Jinja 或是 Tornado 等等的模板語法衝突到。
像是我們的 AngularJS 入門教學 - Hello AngularJS!!:
檢視原始碼 HTML
1 2 3 4 5 6 | <div class="well span6" style="margin-top:20px;"> <label>Name:</label> <input type="text" ng-model="name" placeholder="Enter a name here"> <hr> <h1>Hello {{ name || "AngularJS" }}!!</h1> </div> |
預設是使用 {{ 及 }} 來包裹我們的語法:
不過若是經過像 Django 後端程式處理過再吐到前端的話,可能整個內容就會發生問題囉。因此咱們得想辦法自訂前端模板(angular.js)或是後端模板的符號。
先把 ng-app 指定一個模組,例如:
檢視原始碼 HTML
1 | <html ng-app="MyApp"> |
接著加入引用 js:
檢視原始碼 HTML
1 | <script src="js/controller.js"></script> |
接著讓我們來建立一個名為 MyApp 的模組:
檢視原始碼 JavaScript
1 2 3 4 5 6 | var myApp = angular.module('MyApp', []); myApp.config(function($interpolateProvider){ $interpolateProvider.startSymbol('<%'); $interpolateProvider.endSymbol('%>'); }); |
當我們建立模組時,我們可以透過 .config(configFn) 來進行服務的設定,而筆者是想要自訂模板符號,所以需要的是 $interpolateProvider,因此特別傳入來使用。
我想從函式名稱上應該很容易就能知道 .startSymbol(value) 是用來指定起始符號;而 .endSymbol(value) 是用來指定結尾符號的。所以筆者現在是想用 <% 及 %> 來取代原本的 {{ 及 }}。
先來看一下,若是 View 中的模板符號還是繼續使用 {{ 及 }} 的話:
嗯~原形畢露。那來替換成 <% 及 %> 符號:
檢視原始碼 HTML
1 | <h1>Hello <% name || "AngularJS" %>!!</h1> |
接著再預覽結果:
喏!是不是資料綁定的效果就出現了呢!
有些後端程式也能自訂模板的符號,至於是要改前端還是改後端,就看各位的考量囉!最後請各位將 AngularJS 入門教學 - ngRepeat (一) 的作業拿出來改成使用自訂模板來當練習吧!