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

Trigger the digest cycle in callback events

我想创建一个相应的文本区域和一个 handstontable,这样修改 table 会对文本产生影响,反之亦然。这是一个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>

但是,我意识到的一件事是,adding/deleting rows/columns 不会触发 dataJSON 的观察者(而修改单元格值就可以)。所以我必须在onAfterCreateRow等回调中使用$scope.$digest()来反映添加行的变化。但它引发了 Uncaught TypeError: Cannot set property 'forceFullRender' of null:

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

解决此问题的一种可能方法是使用 $timeout 实现所谓 .请参阅此处更新 JSBin. Also, to see explanation of how $timeout works read the answer Here。希望这会有所帮助。

$timeout 是当前一些旧版本 angular 的解决方法,您可以使用创建的 $applyAsync 来替换 $timeout 作为解决方法,并适用于以下情况你会得到一个错误 $digest already in progress