Question

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

在实现链接http://ui-grid.info/docs/#/tutorial/215_treeView中显示的TreeView功能时，我会根据教程在第18行收到类似的异常。

＆＃34;要求听取treeView.on.rowExpanded，但范围未在输入参数中传递。传递null是合法的，但是你已经传递了其他东西，所以你可能忘记提供范围而不是故意这样做，而不是注册＆＃34;

如何解决此问题？

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>

UI Grid引发异常

1 个答案: