AngularJSディレクティブを使用した検証が動作しない
対象製品
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>
--------------------------------------------------
【再現手順】
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)でのみ有効です。
修正版適用などを行う場合には、上記フィールドの使用を中止してください。
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)でのみ有効です。
修正版適用などを行う場合には、上記フィールドの使用を中止してください。