角度 ui-grid 3.0 api

Question

我有一个注册通用网格的父服务，并在我的许多子网格中使用：

angular.module('acme.services.grid', [
    'ui.grid',
    'ui.grid.selection'
])

    .factory('acmeGrid', function (uiGridConstants, $translate, $mdToast) {

        var UIGrid = function () {
            var grid = {},
                api,
                eventsCallbackQueue = {},
                selectedRows = {},
                loadCallback,
                syncCallback;

            grid.loading = false;
            grid.enableSorting = true;
            grid.enableHorizontalScrollbar = uiGridConstants.scrollbars.NEVER;
            grid.enableMinHeightCheck = false;
            grid.enableRowSelection = true;
            grid.enableRowHeaderSelection = false;
            grid.multiSelect = false;
            grid.modifierKeysToMultiSelect = false;
            grid.noUnselect = false;
            grid.onRegisterApi = function (gridApi) {
                api = gridApi;

                selectedRows = api.selection.getSelectedRows();

                // apply user callbacks
                angular.forEach(eventsCallbackQueue, function (queue, event) {
                    var parts = event.split('.');
                    // invalid callback
                    if (2 < parts.length) {
                        return;
                    }

                    angular.forEach(queue, function (data) {
                        api[parts[0]].on[parts[1]](data.scope, data.func);
                    });

                });
            };

            grid.columnDefs = [];

            function setSyncCallback(func) {
                syncCallback = func;
            }

            function setLoadCallback(func) {
                loadCallback = func;
            }

            function resize() {
                return api.core.handleWindowResize();
            }

            function sync() {
                return syncCallback();
            }

            function load() {
                grid.loading = true;
                return loadCallback()
                    .then(onLoadSuccess, onLoadError);
            }

            function translate(path) {
                /**
                 * translate grid titles (see why using the $filter('translate')('str')
                 * fails to translate in sync mode) while in the ronin.orders application it works
                 */
                angular.forEach(grid.columnDefs, function (col) {
                    $translate(path + '.' + col.displayName)
                        .then(function onTranslate(s) {
                            col.displayName = s;
                        });
                });
            }

            function toast(message, type) {
                type = type || 'primary';

                // mdToast show only one toast,
                // so for now display only first error message
                if (angular.isArray(message)) {
                    message = message[0];
                }

                return $mdToast.show({
                    template: '<md-toast class="md-toast md-toast-"' + type + '>' + message + '</md-toast>',
                    hideDelay: 3000,
                    position: 'bottom right'
                });
            }

            function onLoadSuccess(response) {
                grid.loading = false;
                grid.data = response;
            }

            function onLoadError(errors) {
                toast(errors, 'error');
            }

            function getApi() {
                // don't know why, cannot retrieve it by reference
                // so just use an accessor
                return api;
            }

            // expose ui-grid events with the following name:
            // _API_._EVENT_
            // eg.: "api.selection.on.rowSelectionChanged" becomes "selection.rowSelectionChanged"
            function on(event, $scope, func) {

                if (!eventsCallbackQueue.hasOwnProperty(event)) {
                    eventsCallbackQueue[event] = [];
                }

                eventsCallbackQueue[event].push({scope: $scope, func: func});
            }

            return {
                api: api,
                grid: grid,
                load: load,
                sync: sync,
                selectedRows: selectedRows,
                translate: translate,
                setLoadCallback: setLoadCallback,
                setSyncCallback: setSyncCallback,
                resize: resize,
                on: on
            };
        };

        return {
            getInstance: function () {
                return new UIGrid();
            }
        };
    });

我认为api 有问题，我不明白它的行为：

var grid = {},
api;

grid.onRegisterApi = function (gridApi) {
  api = gridApi;
}

// this doesn't work, I get undefined or Object{} dpending on my initialization
return {
  api: api
}

// this works
return {
  api: function() { return api; }
};

为什么第一次返回不起作用，因为api是一个对象，它不应该在onRegisterApi回调期间通过引用更新吗？

Answer 1

尝试在返回路径之前添加一些日志记录。我保证您的 onRegisterApi 处理程序在您工厂的 return 语句之后运行。

UI-Grid 的 API 注册是异步和延迟的，因此在将其传递回链时需要考虑到这一点。您始终可以使用 Promise 来检索对 API 实例的引用。