$ scope.dtInstance.reloadData () не является функцией при вызове в интервале $

Question

Я испытываю странное поведение с AngularJS Данные, которые, кажется, не могут найти источник проблемы. На странице загрузки мой Datatable работает и заполняется нормально. У меня есть ручная кнопка refre sh, которая вызывает $scope.dtInstance.reloadData();, и она также работает нормально. Тем не менее, я настроил $inverval, который срабатывает каждые 60 секунд для автоматического вызова точно такой же функции ($scope.refreshWeights()) и, похоже, не работает с ошибкой:

Я инициализировал свой Datatable следующим образом:

 $scope.dtInstance = {};
    let refreshInterval = 60000; // Every 60 seconds
    let refreshPromise;

    // Build the datatable
    $scope.dtOptions = DTOptionsBuilder
        .fromFnPromise( function() {

            return WeighBridgeService.get( moment( $scope.searchDate ).format( 'YYYY-MM-DD' ) )
                .then( function( response ) {

                    if( response.status === 200 ) {

                        $scope.weights = response.data.weights;

                        return $scope.weights;

                    } else {

                        return {};

                    }

                }, function( error ) {

                    return {};

                });

        })
        .withDOM( 'lfrtip' )
        .withBootstrap()
        .withPaginationType( 'full_numbers' )
        .withOption('createdRow', function( row, data, dataIndex ) {
            // Recompiling so we can bind Angular directive to the DT
            $compile( angular.element( row ).contents() )( $scope );
        })
        .withOption('fnRowCallback', dtRowCallback)
        ...
        ...

И затем у меня есть код контроллера для обработки refre sh:

$scope.refreshWeights = function() {   // <== This works fine when I press the refresh button

    // Redraw the datatable
    $scope.dtInstance.reloadData( null, true );

};



// Refresh the data every minute
refreshPromise = $interval( function() {  // <== This throws an error every 60 seconds

    $scope.refreshWeights();

}, refreshInterval );

И мой HTML выглядит примерно так:

    <div class="panel">

        <div class="panel-heading">

            <button class="btn pull-right mt-10" ng-click="refreshWeights()"><span class="far fa-sync-alt" ng-class="{ 'fa-spin': refreshing }"></span> Refresh</button>

            <div>

                <h1>Daily Weight Readings</h1>

            </div>

        </div>

        <div class="panel-body">

            <label class="mr-10">Date:</label>
            <input class="form-control" style="width: 264px; display: inline-block" type="date" ng-model="searchDate" ng-change="refreshWeights()"/>

            <hr>

            <table datatable dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="table table-hover cursor-pointer" width="100%"></table>

        </div>

    </div>

У меня точно такой же код в другом веб-приложении, и он работает без ошибок. Я скопировал весь код, проверил и дважды проверил номера версий, и все кажется одинаковым. Я не могу найти то, что пропустил здесь.

Когда я console.log($scope.dtInstance) в функции $scope.refreshWeights(), это показывает мне, что $scope.dtInstance пусто перед вызовом функции reloadData(), однако, впоследствии он отображается как заполненный.

Кроме того, хотя я получаю вышеуказанную ошибку, он все еще вызывает HTTP-запрос и возвращает данные response.data.

Answer 1

пожалуйста, добавьте $scope.dtInstance.rerender(); вместо reloadData

и для ссылки sh использование данных

function myTimeoutFunction()
{
    $scope.dtInstance.rerender();
}
myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);