Question

使用ng-grid与服务器端排序和分页。它有用，但有一点需要注意：初始渲染会进行两次调用以从我的服务中获取数据。

我不确定在jsFiddle或者plunker中复制是多么容易（或者很难）。

这是我的控制器代码：

function reportQueueController($scope, $location, reportDataService) {

    function init() {
        $scope.state = {};
    }    

    $scope.setPagingData = function (data) {
        $scope.reportQueueList = data.Data;
        $scope.totalServerItems = data.TotalItems;
    };

    $scope.$watch('pagingOptions', function(newVal, oldVal) {
        if (newVal === oldVal) return;
        getPagedDataAsync();
    }, true);

    $scope.pagingOptions = {
        pageSizes: [25, 50, 100, 'All'],
        pageSize: 25,
        currentPage: 1
    };

    $scope.$watch('gridOptions.ngGrid.config.sortInfo', function (newVal, oldVal) {
        if (newVal === oldVal) return;
        $scope.state.sortField = newVal.fields[0];
        $scope.state.sortDirection = newVal.directions[0];
        $scope.pagingOptions.currentPage = 1;
        getPagedDataAsync();
    }, true);

    $scope.gridOptions = {
        data: 'reportQueueList',
        enablePaging: true,
        enableRowSelection: false,
        showFooter: true,
        pagingOptions: $scope.pagingOptions,
        totalServerItems: 'totalServerItems',
        enableSorting: true,
        useExternalSorting: true,
        sortInfo: { fields: ['CustomerName'], directions: ['asc'] },

        filterOptions: $scope.filterOptions,
        columnDefs: [
            { field: 'CustomerName', displayName: 'Customer' },
            { field: 'ParentCustomerName', displayName: 'Parent' },
            { field: 'Name', displayName: 'Report Name' },
            { field: 'Emails', displayName: 'Email Recipients', cellTemplate: emailCellTemplate },
            { cellTemplate: editCellTemplate, width: '50px' }
        ]
    };

    function getPagedDataAsync() {
        console.log('in get data');  //this get logged twice
        reportDataService.getReportQueueList($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.state.emailAddress, $scope.state.reportSearch, $scope.state.sortField, $scope.state.sortDirection).then(function(data) {
            $scope.setPagingData(data);
        });
    };

    init();
}

Answer 1

由于Angular将至少两次调用你的手表，可能由于处理过程而更多，每个$ digest周期你可以使用去抖动。这类似于Windows事件监听器有时会做的事情。下划线（http://underscorejs.org）和lo-dash（http://lodash.com）都提供了一个开箱即用的_.debounce()。

_.debounce()允许你说一个函数最多应该按照指定的毫秒数运行一次 - 无论函数被实际调用多少次。所以你可以这样做：

var checkSortData = _.debounce(function(e) {
    $scope.state.sortField = newVal.fields[0];
    $scope.state.sortDirection = newVal.directions[0];
    $scope.pagingOptions.currentPage = 1;
    getPagedDataAsync();    
}, 500); // Run no more than once every 500 milliseconds

正如你想象的那样，下划线使用$ timeout来做到这一点，所以你可以根据自己的喜好编写自己的debounce。

使用去抖可以通过最小化服务器调用来帮助提高性能/服务器负载。

但是，不是支付轮询服务器的性能价格来查看它是否已更新，您可能还会考虑使用类似http://socket.io的内容。然后你不必使用手表进行轮询，你可以在客户端附加一个事件监听器。这是一篇关于使用由Brian Ford编写的带有Angular的socket.io的文章：http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/

Answer 2

您的代码看起来正确，请检查您是否使用了两次不显眼的js文件，例如

jquery.validate.unobtrusive.js
jquery.validate.unobtrusive.min.js

或者同一个文件正在添加两次。

ng-grid：初始渲染时调用两次的服务

2 个答案: