2017-02-01 8 views
4

Я хочу создать соответствующее текстовое поле вместе с обычным файлом, так что изменение таблицы влияет на текст и наоборот. Вот 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() в других обратных вызовов (то есть, onAfterCreateCol, onAfterRemoveRow и onAfterRemoveCol) поднимет ту же ошибку. Я думаю, что это серьезная проблема, если мы не можем запустить цикл дайджеста в этих событиях обратного вызова. Кто-нибудь знает, как решить эту проблему или иметь какое-либо обходное решение?

ответ

0

$timeout был обходной путь в некоторых старых версиях Угловое в настоящее время, вы можете использовать $applyAsync, который был создан, чтобы заменить $ таймаут в качестве временного решения и работы для тех случаев, когда вы получите ошибку $digest already in progress

+0

действительно, '$ scope. $ applyAsync()' работает. И '$ scope. $ EvalAsync()' работает также. –

0

Одним из возможных способов устранения этой проблемы является использование службы $timeout, которая реализует так называемые. См. Здесь обновленный JSBin. Также, чтобы узнать, как работает $timeout, прочитайте ответ Here. Надеюсь, это поможет.

+0

Она работает, спасибо вы ... –

Смежные вопросы