Kendo UI Grid столбец внешнего ключа с использованием угловых директив

Question

Я пытаюсь создать сетку кендо с двумя столбцами внешних ключей, используя директивы Angular для кендо. Я могу заставить одного работать, но не другого (независимо друг от друга). Если я прокомментирую одно, другой будет работать, и наоборот, но в любом случае будет работать только один. Сокращенный пример кода приведен ниже.

invoicesController.js

app.controller('invoicesController', [
    '$scope', '$rootScope', 'config', 'dataFactory', function($scope, $rootScope, config, dataFactory) {
        $rootScope.title = 'Invoices';

        $scope.filterCustomers = [];
        $scope.filterStatuses = [];

        $scope.invoiceGrid = null;

        var _refreshCustomers = function () {
            dataFactory.get(_.string.format('{0}customers', config.apiUrl)).success(function (result) {
                $scope.filterCustomers = _.map(result, function (cust, key) {
                    return {
                        text: cust.name,
                        value: cust.id
                    }
                });
            });
        };

        var _refreshStatuses = function() {
            dataFactory.get(_.string.format('{0}invoicestatuses', config.apiUrl)).success(function(result) {
                $scope.filterStatuses = _.map(result.data, function(status, key) {
                    return {
                        text: status.name,
                        value: status.id
                    }
                });

                _initializeGrid();
            });
        };

        var _refreshData = function () {
            _refreshCustomers();
            _refreshStatuses();
        };

        _refreshData();

        var _initializeGrid = function() {
            $scope.invoiceGrid = {
                dataSource: {
                        transport: {
                            read: _.string.format('{0}invoices', config.apiUrl),
                            },
                    schema: {
                        data: 'data'
                    },
                    pageSize: 15,
                    sort: { field: 'invoiceDate', dir: 'asc' }
                },
                columns: [
                    { title: 'Subject', field: 'subject', type: 'string', width: '30%'},
                    { title: 'Number', field: 'number', width: '12%' },
                    { title: 'Customer', field: 'customer.id', values: $scope.filterCustomers, width: '15%' },
                    { title: 'Status', field: 'status.id', values: $scope.filterStatuses, width: '14%' },
                    { title: 'Total', field: 'invoiceTotal', type: 'number', format: '{0:c2}', width: '10%' },
                    {
                        title: 'Updated', field: 'updatedOn', type: 'date', format: '{0:d}', width: '19%',
                        template: '#=lastUpdated#'
                    }
                ],
                scrollable: false,
                sortable: true,
                filterable: true,
                pageable: true
            };
        }
    }
]);

dataFactory.js (метод GET)

return $http({
    url: url,
    method: 'GET',
    data: data,
});

list.html

<div data-kendo-grid data-k-ng-delay="invoiceGrid" data-k-options="invoiceGrid" class="top"></div>

Answer 1

Я смог заставить это работать, используя разрешение маршрута.

По сути, когда вы определяете свои маршруты, вы можете установить распознаватели. В этом случае я разрешаю customers а также statuses который вы также увидите в качестве аргументов на projectsController

app.js (конфигурация маршрутизации)

// Projects
$routeProvider.when('/projects', {
    templateUrl: '/app/views/projects/list.html',
    controller: 'projectsController',
    resolve: {
        customers: ['customerService', function (customerService) {
            return customerService.getCustomers();
        }],
        statuses: ['projectService', function (projectService) {
            return projectService.getStatuses();
        }]
     }
});

projectsController.js (сокращенно)

app.controller('projectsController', [
    '$scope', '$rootScope', 'config', 'customers', 'statuses', function($scope, $rootScope, config, customers, statuses) {

        // Set the options from the injected statuses (from the route resolver)
        $scope.statusOptions = _.map(statuses.data.data, function(status) {
            return { value: status.id, text: status.name }
        });

    ....

         // Kendo grid column definition
         columns: [
             { title: 'Status', field: 'status.id', values: $scope.statusOptions, width: '15%' },
         ]

}]);