Angularjs

Question

我正在使用 Angularjs NgTable，在 Angularjs Material 提供的 tab 内进行分页。这很好用。我在项目的很多部分都使用过它，并在不同的部分重新加载了很多次。

但在这种情况下，我无法重新加载 table。并且不知道是什么问题或应该如何重新加载。

我在 DistribucionController 中有这个功能：

$scope.listaFacturaTierra = function () {
    var idFactura = $stateParams.idFactura;
    $facturaTierra = distribucionService.getStockTierra(idFactura);
    $facturaTierra.then(function (datos) {
        $scope.facturaTierra = datos.data;
        var data = datos;
        $scope.tableFacturaTierra = new NgTableParams({
            page: 1,
            count: 8
        }, {
            total: data.length,
            getData: function (params) {
                data = $scope.facturaTierra;
                params.total(data.length);
                if (params.total() <= ((params.page() - 1) * params.count())) {
                    params.page(1);
                }
                return data.slice((params.page() - 1) * params.count(), params.page() * params.count());
            }});
    });
};

$scope.listaFacturaBebelandia = function () {
    var idFactura = $stateParams.idFactura;
    $facturaBebelandia = distribucionService.getStockBebelandia(idFactura);
    $facturaBebelandia.then(function (datos) {
        var data = datos.data;
        $scope.facturaBebelandia = datos.data;
        $scope.tableFacturaBebelandia = new NgTableParams({
            page: 1,
            count: 10
        }, {
            total: data.length,
            getData: function (params) {
                data = $scope.facturaBebelandia;
                params.total(data.length);
                if (params.total() <= ((params.page() - 1) * params.count())) {
                    params.page(1);
                }
                return data.slice((params.page() - 1) * params.count(), params.page() * params.count());
            }});
    });
};
$scope.listaFacturaLibertador = function () {
    var idFactura = $stateParams.idFactura;
    $facturaLibertador = distribucionService.getStockLibertador(idFactura);
    $facturaLibertador.then(function (datos) {
        var data = datos.data;
        $scope.facturaLibertador = datos.data;
        $scope.tableFacturaLibertador = new NgTableParams({
            page: 1,
            count: 10
        }, {
            total: data.length,
            getData: function (params) {
                data = $scope.facturaLibertador;
                params.total(data.length);
                if (params.total() <= ((params.page() - 1) * params.count())) {
                    params.page(1);
                }
                return data.slice((params.page() - 1) * params.count(), params.page() * params.count());
            }});
    });
};

它们显示正常，分页也正常。

我使用 Angularjs 添加元素 Material ngDialog 使用 3 个函数来创建过程。

显示主模态：

$scope.distribuirModal = function (producto) {
    $rootScope.modalProducto = producto;
    ngDialog.open({
        template: 'views/modals/distribucion/modal-distribuir.html',
        className: 'ngdialog-theme-advertencia',
        showClose: false,
        controller: 'DistribucionController',
        closeByDocument: false,
        closeByEscape: false
    });
};

对数据进行处理，并显示确认模态：

$scope.confirmarDistribuir = function (modalDistribuir) {
    var control = 0;
    control = modalDistribuir.tierra + modalDistribuir.bebelandia + modalDistribuir.libertador;
    if (control === $rootScope.modalProducto.cantidadTotal) {
        if (modalDistribuir.tierra !== null) {
            $scope.wrapper.stockTierra.idProducto = $rootScope.modalProducto;
            $scope.wrapper.stockTierra.cantidad = modalDistribuir.tierra;
        }
        if (modalDistribuir.bebelandia !== null) {
            $scope.wrapper.stockBebelandia.idProducto = $rootScope.modalProducto;
            $scope.wrapper.stockBebelandia.cantidad = modalDistribuir.bebelandia;
        }
        if (modalDistribuir.libertador !== null) {
            $scope.wrapper.stockLibertador.idProducto = $rootScope.modalProducto;
            $scope.wrapper.stockLibertador.cantidad = modalDistribuir.libertador;
        }
        ngDialog.open({
            template: 'views/modals/distribucion/confirmacion-distribuir.html',
            className: 'ngdialog-theme-advertencia',
            showClose: false,
            controller: 'DistribucionController',
            closeByDocument: false,
            closeByEscape: false,
            data: {
                'wrapper': $scope.wrapper,
                'producto': $rootScope.modalProducto
            }
        });
    } else {
        $scope.alerts.push({
            type: 'danger',
            msg: 'La cantidad total de productos a distribuir debe ser igual a la cantidad total de productos en almacen.'
        });
    }
};

在这个模式中，我执行了一个函数，将数据保存在我的 API

$scope.finalizarDistribucion = function () {
    $scope.sendWrapper = {
        stockTierra: null,
        stockBebelandia: null,
        stockLibertador: null
    };
    if ($scope.ngDialogData.wrapper.stockTierra.idProducto !== null && $scope.ngDialogData.wrapper.stockTierra.cantidad) {
        $scope.sendWrapper.stockTierra = $scope.ngDialogData.wrapper.stockTierra;
    }
    if ($scope.ngDialogData.wrapper.stockBebelandia.idProducto !== null && $scope.ngDialogData.wrapper.stockBebelandia.cantidad) {
        $scope.sendWrapper.stockBebelandia = $scope.ngDialogData.wrapper.stockBebelandia;
    }
    if ($scope.ngDialogData.wrapper.stockLibertador.idProducto !== null && $scope.ngDialogData.wrapper.stockLibertador.cantidad) {
        $scope.sendWrapper.stockLibertador = $scope.ngDialogData.wrapper.stockLibertador;
    }
    $distribute = distribucionService.add($scope.sendWrapper);
    $distribute.then(function (datos) {
        if (datos.status === 200) {
            ngDialog.closeAll();
            toaster.pop({
                type: 'success',
                title: 'Exito',
                body: 'Se ha distribuido con exito los productos.',
                showCloseButton: false
            });
        }
    });
    $scope.$emit('updateTables', $scope.ngDialogData.producto);
    $scope.$emit('updateStock', {});
};

在这个函数中我做了两个 $emit

第一个在我的 ProductoController 中更新我的对象 Producto 并发送一个 $broadcast 来更新我的主体 table

$scope.$on('updateTables', function (event, object) {
    var idFactura = parseInt($stateParams.idFactura);
    object.estadoDistribucion = true;
    $updateProducto = _productoService.update(object);
    $updateProducto.then(function (datos) {
        if (datos.status === 200) {
            $rootScope.$broadcast('updateTableProducto', {'idFactura': idFactura});
        }
    });
});

这最后一个工作正常，重新加载 table 没有问题。

第二个$emit有问题，必须重新加载另外3个tables

$scope.$on('updateStock', function () {
    var idFactura = parseInt($stateParams.idFactura);
    $facturaTierra = distribucionService.getStockTierra(idFactura);
    $facturaTierra.then(function (datos) {
        $scope.facturaTierra = datos.data;
        $scope.tableFacturaTierra.reload();
    });
    $facturaBebelandia = distribucionService.getStockBebelandia(idFactura);
    $facturaBebelandia.then(function (datos) {
        $scope.facturaBebelandia = datos.data;
        $scope.tableFacturaBebelandia.reload();
    });
    $facturaLibertador = distribucionService.getStockLibertador(idFactura);
    $facturaLibertador.then(function (datos) {
        $scope.facturaLibertador = datos.data;
        $scope.tableFacturaLibertador.reload();
    });
});

但是我的ngTable参数是undefined，重载失败

有人知道我做错了什么吗？

Answer 1

经过多次尝试终于找到了答案。

首先在我的 ProductoController 我对我的 DistribucionController

做了一个 $broadcast

$rootScope.$on('updateTableProducto', function (event, object) {
    $list = _productoService.searchByIdFactura(object.idFactura);
    $list.then(function (datos) {
        $scope.productosFactura = datos.data;
        $rootScope.$broadcast('updateStock', {});
        $scope.tableProductosFactura.reload();
    });
});

然后我在我的另一个控制器上使用

收到这个 $broadcast

$scope.$on('updateStock', function (event, object) {
    var idFactura = parseInt($stateParams.idFactura);
    $facturaTierra = distribucionService.getStockTierra(idFactura);
    $facturaTierra.then(function (datos) {
        $scope.facturaTierra = datos.data;
        $scope.tableFacturaTierra.reload();
    });
    $facturaBebelandia = distribucionService.getStockBebelandia(idFactura);
    $facturaBebelandia.then(function (datos) {
        $scope.facturaBebelandia = datos.data;
        $scope.tableFacturaBebelandia.reload();
    });
    $facturaLibertador = distribucionService.getStockLibertador(idFactura);
    $facturaLibertador.then(function (datos) {
        $scope.facturaLibertador = datos.data;
        $scope.tableFacturaLibertador.reload();
    });
});

注意：如果我写 $rootScope.on 它会执行 3 次。所以在 $scope 中只做一个循环。

希望对大家有所帮助。

Angularjs - NgTable 在重新加载时未定义

Angularjs - NgTable got undefined in reload

html

javascript

angularjs-directive

ngtable