當使用 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 (一) 的作業拿出來改成使用自訂模板來當練習吧！