JavaScript
AngularJS
mvc

【AngularJS】改行をとにかく簡単に有効にする方法

More than 3 years have passed since last update.

AngularJSで、Controllerで代入した文字列を表示させたいときは、{{文字列}}とかng-bind とか使って戯れますが...


改行ができない

$scope.hogehoge = '改行して\nお願い'; とかやって

{{hogehoge}}

しても、htmlとして解釈されるらしく\nがそのまま出力されるんですね。

じゃあ、<br />ぶちこもうとしても、セキュリティ対策のためにサニタイズされてしまう。

一般にはngSanitizeコネコネしてからのng-bind-htmlとか、

filter書いて/nとか置き換えてからの$sce.trustAsHtmlとかがいいらしいですが、良いやり方を見つけたのでメモ


解決法


style.css

p  {white-space: pre-wrap;}



index.html

...

<p>{{hogehoge}}</p>
...

と書くと


mainCtrl.js

...

$scope.hogehoge = '改行して\nお願い';
...

としてもちゃんと改行されて表示されます

あまり推奨ではないですが、とにかく楽なんでおすすめ


特筆すべきこと

CSSのソース中の半角スペース・タブ・改行の表示の仕方を指定するwhite-spaceをソース中の連続する半角スペース・タブ・改行を、そのまま表示するpre-wrapにすることで、ちゃんと解釈してくれる感じです。

ただ、pre-wrapに対応していない、そもそもwhite-spaceプロパティが使えないブラウザもあるので、そこらへんはCan I useあたりを見ていただけると幸いです。


【white-space】 Can I use.. : http://caniuse.com/#search=white-space





そういえばAngular 2が来るらしいですね(他人事)