Home » AngularJS 入門教學

[AngularJS]AngularJS 入門教學 - 自訂表達式(模板)符號

範例 1

當使用 Angular 表達式(Angular Expressions)在非元素屬性中時,表達式語法得用 {{}} 來包裹。這樣的用法可以把它當成是前端的模板語法來使用,但...很有可能會跟一些後端程式,像是 DjangoJinja 或是 Tornado 等等的模板語法衝突到。

像是我們的 AngularJS 入門教學 - Hello AngularJS!!

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>

預設是使用 {{}} 來包裹我們的語法:
custom-interpolation-markup-0

不過若是經過像 Django 後端程式處理過再吐到前端的話,可能整個內容就會發生問題囉。因此咱們得想辦法自訂前端模板(angular.js)或是後端模板的符號。

先把 ng-app 指定一個模組,例如:

1
<html ng-app="MyApp">

接著加入引用 js:

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 中的模板符號還是繼續使用 {{ 及 }} 的話:
custom-interpolation-markup-1

嗯~原形畢露。那來替換成 <%%> 符號:

1
<h1>Hello <% name || "AngularJS" %>!!</h1>

接著再預覽結果:
custom-interpolation-markup-2

喏!是不是資料綁定的效果就出現了呢!

有些後端程式也能自訂模板的符號,至於是要改前端還是改後端,就看各位的考量囉!最後請各位將 AngularJS 入門教學 - ngRepeat (一) 的作業拿出來改成使用自訂模板來當練習吧!

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響