AngularJSディレクティブを使用した検証が動作しない

文書番号 : 39546     文書種別 : 不具合     登録日 : 2016/09/20     最終更新日 : 2017/03/29
文書を印刷する
対象製品
SpreadJS 9J
発生環境
SP1(9.20161.0)
状況
修正済み
詳細
AngularJSディレクティブを使用してセル内容の検証を実装した場合に、showErrorMessage()、errorMessage()メソッドが動作しなくなる現象が発生します。

【再現手順】
1.以下の再現コードを実行します
2.セルA1に2000以上の数値を入力します

【現象】
ValidationErrorイベント内でshowErrorMessage()およびerrorMessage()メソッドが動作せず、コンソールに何も出力されない現象が発生します。

【再現コード JavaScript, ファイル名:sample.js】
--------------------------------------------------
var app = angular.module('spread-app', ['gcspreadsheets']);
app.controller('sjs-ctrl', ['$scope','$http',function ($scope, $http) {
  angular.element(document).ready(function () {
    $scope.spread = $("#ss").data("workbook");
    $scope.spread.bind(
      GC.Spread.Sheets.Events.ValidationError,
      function (sender, args) {
        var validator = args.validator;
        //検証エラー発生時、下記のメソッドが動作しない現象が発生します
        console.log("showErrorMessage:" + validator.showErrorMessage());
        console.log("errorMessage:" + validator.errorMessage());
      });
    
    $http.get("data.json").then(function (result) {
      $scope.data = result.data;
    });
  });
}]);
--------------------------------------------------

【再現コード JSONデータ, ファイル名:data.json】
--------------------------------------------------
[
 { "column1": "1292" },
 { "column1": "1383" },
 { "column1": "1476" },
 { "column1": "1555" },
 { "column1": "1624" }
]
--------------------------------------------------

【再現コード html, ファイル名:sample.html】
--------------------------------------------------
<!DOCTYPE html>
<html ng-app="spread-app">
<html>
  <head>
    <title>SpreadJS Sample</title>
    <meta charset="utf-8" />
    <!-- jQuery-->
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
    <!-- AngularJS-->
    <script type="text/javascript" src="https://code.angularjs.org/1.2.22/angular.min.js"></script>
    <!-- SpreadJS CSS、Libraries -->
    <link type="text/css" href="http://cdn.grapecity.com/spreadjs/9201610/css/gc.spread.sheets.excel2013white.9.20161.0.css" rel="stylesheet"/>
    <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/9201610/scripts/gc.spread.sheets.all.9.20161.0.min.js"></script>
    <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/9201610/scripts/interop/angular.gc.spread.sheets.9.20161.0.min.js"></script>
    <!-- SpreadJS JP locale, resource -->
    <meta name="spreadjs culture" content="ja-jp" />
    <script src='http://cdn.grapecity.com/spreadjs/9201610/scripts/resources/ja/gc.spread.sheets.resources.ja.9.20161.0.min.js' type='text/javascript'></script>
    <!-- Logic codes -->
    <script src="./Sample.js" type="text/javascript"></script>
  </head>
  
  <body>
    <div class="container" ng-controller="sjs-ctrl">
      <div class="spread">
        <gc-spread-sheets id="ss" style="width: 500px; height: 300px; border: 1px solid gray;">
          <worksheets>
            <worksheet datasource="data">
              <columns>
                <column dataField="column1">
                  <default-style locked="false" formatter="#,##0" font="10pt 'Meiryo UI'">
                    <number-validator isIntegerValue = "true" comparisonoperator="between" value1="1000" value2="1999" showErrorMessage="true" errorMessage="1000-1999の範囲で値を入力してください。"></number-validator>
                  </default-style>
                </column>
              </columns>
            </worksheet>
          </worksheets>
        </gc-spread-sheets>
      </div>
    </div>
  </body>
</html>
--------------------------------------------------
回避方法
SpreadJS 9J SP2(Ver.9.20171.0)で修正済み
SpreadJS 9J SP2(Ver.9.20171.0)より前のバージョンでは次の回避方法が有効です。
------------------------------------------

showErrorMessage()、errorMessage()メソッドの代わりにshowErrorMessage、errorMessageフィールドを使用します。

【再現コードへの回避策適用例】
--------------------------------------------------
var app = angular.module('spread-app', ['gcspreadsheets']);
app.controller('sjs-ctrl', ['$scope','$http',function ($scope, $http) {
  angular.element(document).ready(function () {
    $scope.spread = $("#ss").data("workbook");
    $scope.spread.bind(
      GC.Spread.Sheets.Events.ValidationError,
      function (sender, args) {
        var validator = args.validator;
        //検証エラー発生時、下記のメソッドが動作しない現象が発生します
        //console.log("showErrorMessage:" + validator.showErrorMessage());
        //console.log("errorMessage:" + validator.errorMessage());
        //showErrorMessage、errorMessageフィールドを使用します
        console.log("showErrorMessage:" + validator.showErrorMessage);
        console.log("errorMessage:" + validator.errorMessage);
      });
    
    $http.get("data.json").then(function (result) {
      $scope.data = result.data;
    });
  });
}]);
--------------------------------------------------


この回避策はSP1(9.20161.0)でのみ有効です。
修正版適用などを行う場合には、上記フィールドの使用を中止してください。