ThymeleafとAngularの連携について

Question

Spring Bootからテンプレートのthymeleafに埋め込んだ変数を、js（angularJS）で受け取る方法を探しております。

具体的にはSpring Securityで認証後、認証しているemailをthymeleafに渡して表示しています。
thymeleafの画面制御自体はth:ifなりを利用すれば問題なかったのですが、angular部分でもログイン有無を確認したい処理が発生しました。

画面描画時点でthymeleafの変数変換は出来ているはずなので、以下のようにすることでその後呼ばれるJSは問題ない認識でいたのですが、無理のようでした。
なおjsはHTMLとは別ファイルであり、bodyタグの最下で参照しています。

～
<input type="hidden" th:value="${login_email}" ng-model="login_email" />
～

～
console.log("email : " + $scope.login_email);
～

結果 ： 「email : undefined」

上記のような場合の解決方法についてご存知の方がいましたら、ご教授願います。

Answer 1

ng-model の初期値を指定するには、value ではなく ng-init を利用します
http://d.hatena.ne.jp/dai_yamashita/20130130/1359535779

ブラウザに返却されるHTMLは恐らく、質問者様が意図した通りに以下のようになっていると思われます

～
<input type="hidden" value="[e-mail]" ng-model="login_email" />
～

ただ、ng-model で指定している $scope.login_email は、
input の value を初期値としてセットしてくれるわけではないので、
該当の javescript から参照した場合に undefined となっていると思われます

Comments

[rontec]

なるほどng-init使えばいいのですね…！
なんか普段使わないから発想から抜けていました。
ありがとうございます。

Answer 2

Javascript内でのThymeleaf式の使い方は以下のリンク先の通りとなってます。
スクリプトのインライン処理

Thymeleafの式変換はあくまでもVIEW部分となるHTMLにのみ適用されるものだと思います。
そのため、外部ファイルとして定義されているJSファイル内ではThymeleafの式変換はおそらくできないです。

間違ってたらごめんなさい…。

Comments

[rontec]

アドバイスありがとうございます。

```
<input type="hidden" th:value="${login_email}" ng-model="login_email" />
```

これでangularの評価前にthymeleafの変換でvalueが設定されているなら問題ないと思っていたのですが、そうではないということなのでしょうね…。
なかなか難しいものですね。