Angularjs でテンプレートのexpressionを変更する

必要なの？

必要なの？と聞かれると困るんですが、いまKraken-jsを使ってちょっとしたWebアプリケーションを作っています。
クライアントサイドはAngularjsを使いたいのですが、Kraken-jsのデフォルトのテンプレートエンジンはDust.jsでexpressionがAngularjsと微妙にかぶるという問題が。

dust.js

<strong> {Word.to.be.strong} </strong>

Angularjs

<strong> {{Word.to.be.strong}} </strong>

Angularjsの記法をdustに記述した場合に出力されるHTML

<strong> {} </strong>

やり方

いろいろとKraken-jsの設定をいじっても回避できそうですが、面倒なのでAngularjsの $interpolateProvider を使って回避してみました。 startSymbol と endSymbol に任意のexpressionを渡せばおkです。

$interpolateProviderについては公式のドキュメントを参照

angular.module('sampleApp', []).config(['$interpolateProvider', function ($interpolateProvider) {
    // 開始のexpressionを (( に変更
    $interpolateProvider.startSymbol('((');
    // 終了のexpressionを )) に変更
    $interpolateProvider.endSymbole('))');
}]);

こんな感じで書きます。

<strong> ((Word.to.be.strong)) </strong>

出力されるHTML

<strong> Strong Word </strong>

同じ方法でその他のテンプレートエンジンとexpressionがかぶったときも回避できます。
やりましたね :)

AngularJS

はじめてのAngularJS―「双方向データ結合」&「依存性注入」 (I/O BOOKS)