Wijmo POPUPコントロール:動的メッセージ

2018-07-16

Wijmoとは

Wijmoとは、グレープシティが提供しているJavaScriptライブラリーです。
グラフ、コンボボックス、Popupウィンドウ等、開発に効率的なコントロール群をもっています。

今回は、Popupウィンドウでメッセージ内容を動的にする方法を記載します。
Popupウィンドウコントロールは、こちらにサンプルがありますので、どういうものかは確認してください。

※ スクリプトは「Angular JS」を用いています。

Popupウィンドウ内に変数を用いて動的に

AngularJSはリアルタイムでの双方向データバインディングを行うことができます。
その方法は、HTML内に「{{hensu}}」と記載してあげ

という形でとしてあげれば動的に書き換えることができます。
でも、これでは単純な文字列しかできません。
POPUPなどれでは、動的HTMLなどやってみたいものです。

動的HTML

JavaScriptなどでは「innerHTML」を使用してあげるのが、簡単な方法です。
今回はAngular JSを用いていますので、その方法は「ng-bind-html属性」を使用すれば実現できます。
ng-bind-html属性を使用するには、ngSanizeモジュールを使用します。

wijimoでngSanizeモジュールの使い方

HTML部分のソース

引数の val に HTMLソースを設定すれば動的にメッセージを変更することができます。