LoginSignup
3
4

More than 5 years have passed since last update.

AngulaJSのテンプレート(ngBind)デリミタを変更したい

Posted at
<div>{{hoge}}</div>

↑を↓みたいにしたいとか、そういうアレね。

<div>%%hoge%%</div>

ググっても出なかったから、ソースをgrepして探した話。
>> 結論を見る

「angularjs デリミタ」でググったところ、曰く・・・

  • golangテンプレートとAngularJSのデリミタがぶつかった
  • Jinja2とAngularJSの変数スコープの競合を解決する方法
  • Golang+Revel環境でAngularJSを使うTips

でもこれ、全部 AngularJS じゃなくて、サーバサイド側(?)のデリミタを変更してたので、要件と違うわけです。

1

まず、angular.js (concat されてて minify/aglify されてないやつ) から素直に grep

$ grep "{{" angular.js | wc -l
    248

wc -l を書いてあるけど、要するに248行ある。しかもコメント行が多かった。

2

だもんで、次にコメント行を潰す。

$ grep -v "\s*\*" angular.js | grep "{{" | wc -l
    163

だいぶ減った。このあたりでまぁ、手がかりは見つかるんだけど、もうちょっとぶっ込んで見る。

3

Angular.jsのコメント行には、サンプルを生成するための HTML が書かれているので、タグっぽいのを消すのと、変数へ {{ の代入は行われているだろうということで = を条件に加えた。

$ grep -v "\s*\*" angular.js | grep -v "\s*<" | grep "{{" | grep "="  | wc -l
    8
$ grep -v "\s*\*" angular.js | grep -v "\s*<" | grep "{{" | grep "=" 
     I can add: {{a}} + {{b}} =  {{ a+b }}
           I can add: {{a}} + {{b}} =  {{ a+b }}
           I can add: {{a}} + {{b}} =  {{ a+b }}
        $scope.html = 'Hello {{name}}';
        denormalizeTemplate = (startSymbol == '{{' || endSymbol  == '}}')
  var startSymbol = '{{';
                     id="{{name}}"
          whenExp = attr.$attr.when && element.attr(attr.$attr.when), // we have {{}} in attrs

これで、どっからどう見ても startSymbol で検索すればわかる・・・ということがわかりますね。うん。

4

$ grep -n "var startSymbol " angular.js 
7409:    var startSymbol = $interpolate.startSymbol(),
10773:  var startSymbol = '{{';

$interpolatestartSymbol メソッドがある。コレが怪しいですな。ぐぐった。
https://code.angularjs.org/1.4.7/docs/api/ng/service/$interpolate#startSymbol

5

ご丁寧に、以下のように書いてあるわけです。

Use $interpolateProvider.startSymbol to change the symbol.

コレを見に行くと、Exampleのところにやりたいことが書いてありました。
https://code.angularjs.org/1.4.7/docs/api/ng/provider/$interpolateProvider#example

結論

定義した App の config で書き換えればおk

var app = angular.module('hogeApp', []);

app.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('%%');
  $interpolateProvider.endSymbol('%%');
});

でもこれ、影響範囲でかすぎる気がするぞ。。。

おまけ

「angularjs delimiter」でググったところ、一発で出てきた。。。
javascript - Angular JS custom delimiter - Stack Overflow

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4