时间戳

首页 > 解决方案 > angular().service() 不会在我作为参数传递的对象中获得更新

javascript - angular().service() 不会在我作为参数传递的对象中获得更新

问题描述

好第一次在这里，很抱歉混乱或长文本。

我将$scope.alertsensorconfigs作为tableData传递给我的服务，当我删除一个项目时，我的$scope.alertsensorconfigs发生了变化，但是当它尝试重新加载表时，我发现tableData没有改变。

详细解释：

我有一个使用 NgTable 在不同页面中创建大量表的站点，但是转换和过滤我想在页面中显示的数据的所有逻辑都在页面中编码并且它重复了很多次但它是工作，所以我决定为您提供所有这些服务。

所以我的问题是，我创建了服务，它几乎都像以前一样工作，但我注意到当我从表中删除一个项目时，它会删除数据但继续在表上显示它，直到我重新加载页面。

我注意到这是因为即使我在页面上的对象在删除后发生了变化，当它在我的服务中时，该对象似乎是未更改的对象，因为我将对象作为参数传递给我的服务，所以我认为它会像一个对对象的引用，并且它在我的服务中更改的页面上发生了变化，但看起来情况并非如此，看起来它第一次调用我的服务它制作了我的对象的副本，然后它再次调用它不会得到更新的。

我的页面代码。

$scope.funcFilter = function(pfilter){
    return function (item) {
        return item.name.toUpperCase().indexOf(pfilter) >= 0
            || 
item.criticality1.toString().toUpperCase().indexOf(pfilter) >= 0
            || 
item.criticality2.toString().toUpperCase().indexOf(pfilter) >= 0
            || $filter('translate') 
(item.active.toString().toUpperCase()).indexOf(pfilter) >= 0;
    }
}
    $scope.searchTable = {filter: ""};
    $scope.tableParams = 
NgTableDataService.getGenericTableParams($scope.alertsensorconfigs, 
$scope.funcFilter, $scope.searchTable.filter)

我页面中的删除功能：

AlertSensorConfig.remove({id: obj.id}, function () {
                $scope.alertsensorconfigs.splice($scope.alertsensorconfigs.indexOf(obj), 1);
                $scope.tableParams.reload().then(function(data) {
                    if (data.length === 0 && $scope.tableParams.total() > 0) {
                        $scope.tableParams.page($scope.tableParams.page() - 1);
                        $scope.tableParams.reload();
                    }
                });
            },

我的服务：

angular.module('control-room').service('NgTableDataService', 
function ($filter, NgTableParams, Session) {

    var session = Session.get();

    this.getGenericTableParams = function(tableData, funcFilter, searchTableFilter){
        return new NgTableParams({
            count: session.user.tablePagination,
            filter: searchTableFilter
        }, {
            counts: rowsPerPageTemplate,
            getData: function (params) {
                if (params.filter() == ''){
                    var pfilter = '';
                }else{
                    var pfilter = params.filter().filter.toUpperCase();
                }
                let filteredData = params.filter() ? $filter('filter')(tableData, funcFilter(pfilter)) : tableData;
                if (!!filteredData && filteredData.length >= 0) {
                    params.total(filteredData.length);
                    var rowsPerPageTemplateWithAllData = rowsPerPageTemplate.slice();
                    var isFound = rowsPerPageTemplateWithAllData.some(function (element) {
                        return element === filteredData.length;
                    });
                    params.settings().counts = rowsPerPageTemplateWithAllData.filter(item=>item<filteredData.length)

                    if (filteredData.length >= 5){
                     params.settings().counts.push(filteredData.length);
                    }
                    rowsPerPageTemplateWithAllData.push(filteredData.length + (isFound ? 1 : 0));  
                    if (session.user.tablePagination >= params.settings().counts[params.settings().counts.length-1]){
                        params.settings().count = params.settings().counts[params.settings().counts.length-1];
                    }else{
                        params.settings().count = session.user.tablePagination;
                    }
                    if (params.total() <= params.count()) {
                        params.page(1);
                    }
                    var x = $filter('orderBy')(filteredData, params.orderBy());
                    var y = x.slice((params.page() - 1) * params.count(), params.page() * params.count());
                    return y;
                } else {
                    params.settings().counts = [];
                    return null;
                } 
            }
        });
    };

以及删除后重新加载表的 ng-table 函数：

this.reload = function() {
            var self = this,
                pData = null;

            settings.$loading = true;

            prevParamsMemento = angular.copy(createComparableParams());
            isCommittedDataset = true;

            if (self.hasGroup()) {
                pData = runInterceptorPipeline($q.when(settings.getGroups(self)));
            } else {
                pData = runInterceptorPipeline($q.when(settings.getData(self)));
            }

            log('ngTable: reload data');

            var oldData = self.data;
            return pData.then(function(data) {
                settings.$loading = false;
                errParamsMemento = null;

                self.data = data;
                event even when data === oldData
                ngTableEventsChannel.publishAfterReloadData(self, data, oldData);
                self.reloadPages();

                return data;
            }).catch(function(reason){
                errParamsMemento = prevParamsMemento;
                // "rethrow"
                return $q.reject(reason);
            });
        };

有一些方法可以确保我作为参数传递给我的服务的对象在我每次调用它时都会更新，比如一些绑定？

标签： javascriptangularjsservicengtable

解决方案

我想我设法解决它。

NgTable 有自己的 reload()，但它不起作用，因为它的作用是获取当前的filteredData并替换为一个tableData，但我的服务上的tableData仅在它被称为第一次时才设置并且是我更新了$scope.alertsensorconfigs 时没有更新。

因此，在经历了很多头痛之后，我设法做的是在我的服务中创建：一个接收$scope.alertsensorconfigs的 var serviceTableData ，该服务被调用，因此它在我的服务中是全局的。还有我自己的 reload() 函数，我在我的控制器使用 NgTable reload() 的每个地方都替换了它。

在控制器删除或编辑项目后，我调用的服务 reload() 从控制器接收$scope.alertsensorconfigs作为参数，然后它将serviceTableData设置为作为参数接收的更新数据，然后调用 NgTable reload()。

于是就这样结束了：

angular.module().service('NgTableDataService', 
function ($filter, NgTableParams, Session, MY_CONSTANTS) {

    var session = Session.get();
    var serviceTableParam = null;
    var serviceTableData = null;

    this.reloadTableData = function (tableDataAtt){
        serviceTableData = tableDataAtt;
        serviceTableParam.reload().then(function(data) {
            if (data.length === 0 && serviceTableData.total() > 0) {
                serviceTableParam.page(serviceTableParam.page() - 1);
                serviceTableParam.reload();
            }
        return this.tableData = tableDataAtt;
        });   
    };

    this.getGenericTableParams = function(tableData, searchTableFilter, funcFilter){

        serviceTableData = tableData;
        return serviceTableParam = new NgTableParams({
        // etc...

推荐阅读