Как вызвать функцию уничтожения угловых данных?

У меня есть контроллер, и я хочу вызвать функцию уничтожения Jquery Datatables в контроллере в методе просмотра:

      $scope.$watch('model.SelectedWaiver', function() {
        if ($scope.model.SelectedWaiver.SurchargeID != null) {
            //destroy table here
            $scope.getIndecies($scope.model.SelectedWaiver);

        }
    });

В настоящее время я никак не настраиваю таблицу, потому что на странице есть две таблицы:

первый:

<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered">
    //stuff
</table>

второй:

<table datatable="ng" id="secondTable" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered">
    //stuff
</table>

Я хочу уничтожить эту таблицу, когда пользователь выбирает другую строку в первой таблице.

JQuery-эквивалент:

<script>
    $(document).ready(function() {
        var table = $('#secondTable').DataTable();


    });
    $('#selectedWaiver').on('change', function () {
        table.destroy();
    });
</script>

Как мне сделать эту часть кода в angular?

Использование этого для внедрения таблиц данных


angularjs angular-datatables
person Robert    schedule 20.07.2015    source источник

Ответы (1)


arrow_upward
6
arrow_downward

С dtInstance у вас есть доступ к dataTables API:

$scope.dtInstance = {};

добавить dtInstance в качестве объявления в таблицу

<table datatable dt-instance="dtInstance" dt-options="dtOptions" dt-columns="dtColumns">

Теперь вы можете уничтожить таблицу данных с помощью

$scope.dtInstance.DataTable.destroy();

angular dataTables имеют расширенный ngDestroy() очистка привязок, сделанных самостоятельно:

$scope.dtInstance.DataTable.ngDestroy();

В заголовках все еще есть style (и еще немного мусора), так что удалим и их (здесь на таблице с id #table):

$scope.destroy = function() {
    $scope.dtInstance.DataTable.ngDestroy();
    var i, ths = document.querySelectorAll('#table th');
       for (i=0;i<ths.length;i++) {
          ths[i].removeAttribute('style'); 
       }
    }
}

demo -> http://plnkr.co/edit/fQ9YjsbNBNzyYuuvpk6T?p=preview< /а>

Если у вас есть несколько угловых таблиц данных, используйте несколько dtInstances и разные таблицы id's.

person davidkonrad    schedule 15.12.2015
comment
Таблица не уничтожается в вашем плункере - person Null Pointer; 09.01.2017
comment
@NullPointer это работает для тебя? - person query; 28.06.2017
comment
@query, я обновил plunkr, чтобы он снова работал. l-lin изменил репозиторий некоторое время назад, поэтому каждый проект, plunkr и fiddle, полагающийся на получение последней сборки, сталкивается с версией Angular4. Интересный способ занять людей :( Я думаю, вы находитесь в правильном направлении в отношении вашего вопрос вам нужно будет уничтожать dataTable каждый раз перед повторной инициализацией, теперь вы повторно используете переменные снова и снова. Привязки не уничтожаются сами по себе. - person davidkonrad; 28.06.2017
comment
ты спас мне жизнь! Я потратил часы на ошибку в моей таблице данных, она сработала после того, как я ее уничтожил и воссоздал. благодарю вас - person Abeer Sul; 02.08.2017
comment
@AbeerSul, как ты воссоздал таблицу? - person yousafsajjad; 07.05.2019