UI Grid引发异常

Question

我试图在一个应用程序中实现UI网格树视图功能,该应用程序使用ControllerAs而不是$ scope来绑定数据.

当实现TreeView功能时,如链接http://ui-grid.info/docs/#/tutorial/215_treeView所示,我按照教程在第18行获得了这样的异常.

"请求在treeView.on.rowExpanded上听,但是输入参数中没有传递范围.传递null是合法的,但是你已经传递了其他东西,所以你可能忘了提供范围而不是故意这样做,而不是注册"

我该如何解决这个问题？

Answer 1

没有看到你的代码就很难看出你的问题是什么.但这听起来好像你把错误传递给了事件登记方法.

只是通过null,它应该工作. vm.gridApi.treeBase.on.rowExpanded(null, function (row) { ... });

如文档中所述,您必须稍后手动取消注册该事件.

请看下面的演示或这个jsfiddle.

这是来自ui grid主页的演示,controllerAs而不是$scope.

    var app = angular.module('app', ['ui.grid', 'ui.grid.treeView']); //'ngAnimate', 'ngTouch',

    app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridTreeViewConstants', function ($scope, $http, $interval, uiGridTreeViewConstants) {
        var vm = this;
        // $scope.gridOptions = {
        vm.gridOptions = {
            enableSorting: true,
            enableFiltering: true,
            showTreeExpandNoChildren: true,
            columnDefs: [{
                name: 'name',
                width: '30%'
            }, {
                name: 'gender',
                width: '20%'
            }, {
                name: 'age',
                width: '20%'
            }, {
                name: 'company',
                width: '25%'
            }, {
                name: 'state',
                width: '35%'
            }, {
                name: 'balance',
                width: '25%',
                cellFilter: 'currency'
            }],
            onRegisterApi: function (gridApi) {
                vm.gridApi = gridApi;
                // check how to deregister the rowExpanded event
                // e.g. in $scope.$on('$destroy', ...)
                vm.gridApi.treeBase.on.rowExpanded(null, function (row) {
                    if (row.entity.$$hashKey === vm.gridOptions.data[50].$$hashKey && !vm.nodeLoaded) {
                        $interval(function () {
                            vm.gridOptions.data.splice(51, 0, {
                                name: 'Dynamic 1',
                                gender: 'female',
                                age: 53,
                                company: 'Griddable grids',
                                balance: 38000,
                                $$treeLevel: 1
                            }, {
                                name: 'Dynamic 2',
                                gender: 'male',
                                age: 18,
                                company: 'Griddable grids',
                                balance: 29000,
                                $$treeLevel: 1
                            });
                            vm.nodeLoaded = true;
                        }, 2000, 1);
                    }
                });
            }
        };

        $http.get('http://crossorigin.me/http://ui-grid.info/data/500_complex.json')
            .success(function (data) {
            for (var i = 0; i < data.length; i++) {
                data[i].state = data[i].address.state;
                data[i].balance = Number(data[i].balance.slice(1).replace(/,/, ''));
            }
            data[0].$$treeLevel = 0;
            data[1].$$treeLevel = 1;
            data[10].$$treeLevel = 1;
            data[11].$$treeLevel = 1;
            data[20].$$treeLevel = 0;
            data[25].$$treeLevel = 1;
            data[50].$$treeLevel = 0;
            data[51].$$treeLevel = 0;
            vm.gridOptions.data = data;
        });

        vm.expandAll = function () {
            vm.gridApi.treeBase.expandAllRows();
        };

        vm.toggleRow = function (rowNum) {
            vm.gridApi.treeBase.toggleRowTreeState(vm.gridApi.grid.renderContainers.body.visibleRowCache[rowNum]);
        };

        vm.toggleExpandNoChildren = function () {
            vm.gridOptions.showTreeExpandNoChildren = !vm.gridOptions.showTreeExpandNoChildren;
            vm.gridApi.grid.refresh();
        };
    }]);

    .grid {
        width: 500px;
        height: 400px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.min.js"></script>
<link href="http://ui-grid.info/release/ui-grid-unstable.min.css" rel="stylesheet"/>

<div ng-controller="MainCtrl as ctrl" ng-app="app">
    <button id="expandAll" type="button" class="btn btn-success" ng-click="ctrl.expandAll()">Expand All</button>
    <button id="toggleFirstRow" type="button" class="btn btn-success" ng-click="ctrl.toggleRow(0)">Toggle First Row</button>
    <button id="toggleSecondRow" type="button" class="btn btn-success" ng-click="ctrl.toggleRow(1)">Toggle Second Row</button>
    <button id="toggleExpandNoChildren" type="button" class="btn btn-success" ng-click="ctrl.toggleExpandNoChildren()">Toggle Expand No Children</button>
    <div id="grid1" ui-grid="ctrl.gridOptions" ui-grid-tree-view class="grid"></div>
</div>