UI网格抛出异常

Question

我正在尝试在使用 ControllerAs 而不是 $scope 绑定数据的应用程序中实现 UI 网格树视图功能。

当实现 link http://ui-grid.info/docs/#/tutorial/215_treeView 中所示的 TreeView 功能时，根据教程，我在第 18 行遇到了这样的异常。

"asked to listen on treeView.on.rowExpanded but scope wasn't passed in the input parameters. It is legitimate to pass null, but you've passed something else, so you probably forgot to provide scope rather than did it deliberately, not registering"

我该如何解决这个问题？

Answer 1

不看你的代码就很难看出你的问题是什么。但听起来你向事件注册方法传递了一些错误的东西。

只需传递 null 即可。 vm.gridApi.treeBase.on.rowExpanded(null, function (row) { ... });

如文档中所述，您必须稍后手动注销该事件。

请查看下面或此 jsfiddle 中的演示。

这是来自 ui 网格主页的演示，只是 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>

UI网格抛出异常

UI Grid throws an exception

angularjs

angular-ui-grid