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
さんかわいい:)