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

2018/07/162021/01/09JavaScriptJavascript,Wijmo

1. Wijmoとは

Wijmoとは

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

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

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

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

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

angular
    .module('App', ["wj"])
    .controller('AppController', ["$scope", function($scope, $http) {
         $scope.hensu= "変数";
    }]);

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

動的HTML

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

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

app.controller('AppController', ["$scope", function ($scope, $http) {
    // POP表示
    $scope.showDtl = function (val) {
        // 引数設定
        $scope.dtlItem = val;
        // POPを表示
        $scope.popDtl.show(true);
    }
}]);

HTML部分のソース

<wj-popup control="popDtl" fade-in="true" class="modal-content" hiding="hiding(s,e)">
    <div class="modal-header">
        <button type="button" class="close wj-hide" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">回答</h4>
    </div>
    <hr>
    <div class="modal-body">
        <div class="dl-horizontal">
            <div ng-bind-html="dtlItem"></div>
        </div>
    </div>
    <hr>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary wj-hide" data-dismiss="modal" ng-click="cancelUpdate()">OK</button>
    </div>
</wj-popup>

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