0

Estoy realizando una chrome extension y quiero que los datos se muestren usando un dataTable pero al añadir datos mediante AngularJs aparecen en la datatable pero por ejemplo las entries y la busqueda no muestran los datos recientemente añadidos hasta que se recarga la pagina

app.run(['$rootScope', function($rootScope){
        chrome.storage.sync.get(['ags','switch'], function(data){
        $rootScope.test = [];
        $rootScope.isEmpty = true;
        $rootScope.table;
        if(data.ags!=undefined){
            $rootScope.test = data.ags;
            $rootScope.isEmpty = false;
        }
        if(data.switch!=undefined){
            $rootScope.switch = data.switch;
        }
        else
            $rootScope.switch = false;

        });
        $(document).ready(function() {
            $rootScope.tabla = $('#rowTable').DataTable({
                "ordering": false,
                "deferRender": true
                    });
        });
}])

<table ng-hide="!test.length || showReset" 
       id="rowTable" class="table table-hover table-bordered">
    <thead>
        <tr>
            <th class="table_name"> Nombre </th>
            <th class="table_ip"> Ip </th>
            <th class="table_actions">Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in test track by $index" ng-cloak ng-
       click="changeUrl(row)" ng-class="{rowOn: row.is_on}">
            <td class="table_name">{{row.name}}</td>
            <td class="table_ip">{{row.ip}}</td>
            <td class="table_actions">
                <i class="material-icons material-icons-m"
                   ng-click="edit($index); $event.stopPropagation()">mode_edit</i>
                <i class="material-icons material-icons-m"
                   ng-click="delete($index); $event.stopPropagation()">delete</i>
            </td>
        </tr>
    </tbody>
</table> <br>

Añado aquí la funcion tal cual que uso para añadir datos

$scope.new = function(){
    $rootScope.test.push(({"name": 
    document.getElementById('name').value,"ip": 
    document.getElementById('ip').value ,"is_on": false}));
    chrome.storage.sync.set({'ags': $rootScope.test});
}
2
  • 1
    si estas usando angular, por que usas jQuery esto es una mala practica y por eso suele fallar el DOM Commented el 9 abr. 2018 a las 14:41
  • puedes usar jquery, pero solo en componentes que deberian manipular el DOM como las directivas y siempre que manipules el DOM debes permitir que angular realice el ciclo de $digest
    – Klaimmore
    Commented el 9 abr. 2018 a las 14:53

1 respuesta 1

0

Al final solucione mi problema usando la libreria ng-table

<table class="table table-condensed table-bordered table-hover" ng-table="tableParams">
    <tbody>
        <tr ng-repeat="row in $data" ng-cloak ng-click="changeUrl(row)" ng-class="{rowOn: row.is_on && switch}">
            <td data-title="'Nombre'" class="table_name" filter="{name: 'text'}">{{row.name}}</td>
            <td data-title="'Ip'" class="table_ip" filter="{ip: 'text'}">{{row.ip}}</td>
            <td data-title="'Acciones'" class="table_actions">
                <i class="material-icons material-icons-m" ng-click="edit($index);    $event.stopPropagation()">mode_edit</i>
                <i class="material-icons material-icons-m" ng-click="delete($index); $event.stopPropagation()">delete</i>
            </td>
        </tr>
    </tbody>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.