UI Grid抛出异常

Question

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

当按照链接http://ui-grid.info/docs/#/tutorial/215_treeView所示的方式实现TreeView功能时，我在本教程中收到了第18行的异常。

“要求听上treeView.on.rowExpanded但范围没有输入参数传递。这是合法的传递null，但你通过别的东西，所以你可能忘了提供范围相当比它故意没有注册“

我该如何解决？

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>