在回调事件中触发摘要循环

时间:2017-02-01 01:24:11

标签: angularjs callback handsontable angular-digest

我想创建一个相应的textarea以及handstontable,这样修改表对文本有影响,反之亦然。这是JSBin

<!DOCTYPE html>
<html>
<head>
    <script src="https://handsontable.github.io/ngHandsontable/node_modules/angular/angular.js"></script>
    <script src="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.js"></script>
    <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.css">
    <script src="https://handsontable.github.io/ngHandsontable/dist/ngHandsontable.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="Ctrl">
        <hot-table settings="settings" on-after-create-row="onAfterCreateRow" datarows="dataJson"></hot-table>
        <br><br>
        <textarea cols=40 rows=20 ng-model="dataString"></textarea>
    </div>
    <script>
    var app = angular.module('app', ['ngHandsontable']);
    app.controller('Ctrl', ['$scope', '$filter', 'hotRegisterer', function ($scope, $filter, hotRegisterer) {
        $scope.dataJson = [[5, 6], [7, 8]];

        $scope.onAfterCreateRow = function (index, amount) {
            $scope.$digest();
        };

        $scope.$watch('dataJson', function (dataJson_new) {
            $scope.dataString = $filter('json')(dataJson_new);
        }, true);

        $scope.$watch('dataString', function (dataString_new) {
            try {
                $scope.dataJson = JSON.parse(dataString_new);
            } catch (e) {
            }
        }, true);

        $scope.settings = {
            contextMenu: true,
            contextMenuCopyPaste: {
                swfPath: 'zeroclipboard/dist/ZeroClipboard.swf'
            }
        };
    }]);
    </script>
</body>
</html>

但是,有一点我意识到,添加/删除行/列不会激活dataJSON的观察者(而修改单元格值会这样做)。因此,我必须在$scope.$digest()等回调中使用onAfterCreateRow来反映添加行的更改。但它提出了Uncaught TypeError: Cannot set property 'forceFullRender' of null

screen shot 2017-02-01 at 17 07 55

在其他回调中使用$scope.$digest()(即onAfterCreateColonAfterRemoveRowonAfterRemoveCol)会引发同样的错误。如果我们不能在这些回调事件中很好地触发摘要周期,我认为这是一个严重的问题。有谁知道如何解决这个问题或有任何解决方法?

2 个答案:

答案 0 :(得分:0)

解决此问题的一种可能方法是使用实​​现所谓的$timeout服务。请参见此处更新JSBin。另外,要查看$timeout的工作原理,请阅读答案Here。希望这会有所帮助。

答案 1 :(得分:0)

$timeout目前是某些旧版角度的变通方法,您可以使用创建的$applyAsync替换$ timeout作为变通方法,并适用于您将收到错误的情况{ {1}}