AngularJS と jinja2 の変数スコープの競合を解決する方法 #JavaScript

AngularJS と jinja2 は HTML に変数スコープを {{...}} という二重の波括弧で囲う構文仕様になっています. よって, Python のフレームワークで使われる jinja2 で AngularJS を書きたい場合に HTML に AngularJS の変数スコープを書くと競合してしまい, AngularJS の変数スコープは無効化されてしまいます.

AngulaJS と jinja2 の変数スコープを競合させない為に, AngulaJS の変数スコープのブロック構造を変更する方法があります.

$interpolateProvider というヘルパーを使います. AngularJS の version 1.2.0 以降の機能です.

記述例

AngularJS の変数スコープのブロック構造を [[...]] に変更してみます.

util.js


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

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

以上の設定だけです. 簡単でしたね. これで myapp のモジュール内は [[...]] が適応されます.

index.html

<!doctype html>
<html ng-app="myapp">
  <head>
    ...
  </head>
  <body>
    <!--jinja2 の変数スコープ-->
    <div>{{app.name}}</div>
    ...
    <!--AngularJS の変数スコープ-->
    <div ng-controller="DemoController">[[demo.label]]</div>
    ...
  </body>
</html>

以下の HTML のように書くことで, AngularJS の変数スコープが jinja2 にレンダリングされるのを防ぐことができます.

AngularJS さんかわいい：）