从包含ng网格对象的状态转换不起作用

Transitioning from a state containing an ng-grid object is not working

本文关键字：状态 转换 不起作用 对象 包含 ng 网格      更新时间：2023-09-26

在我的AngularJS应用程序中，我使用ui路由器进行导航，并使用ng网格显示数据。在我从一个包含网格的状态转换到任何其他状态之前，一切都很好。这是相应的模板：

<div ng-controller="MainUserController" class="container-fluid">
    <div class="row">
        <div class="col-xs-3">
            <div class="gridStyle" ng-grid="gridOptions"></div>
        </div>
    </div>
</div>

当从这个状态转换到任何其他状态时，我记录以下错误流：

TypeError: Cannot read property 'off' of null
at HTMLDivElement.<anonymous> (http://127.0.0.1:9000/bower_components/ng-grid/build/ng-grid.debug.js:1008:31)
at HTMLDivElement.jQuery.event.dispatch (http://127.0.0.1:9000/bower_components/jquery/dist/jquery.js:4624:9)
at HTMLDivElement.elemData.handle (http://127.0.0.1:9000/bower_components/jquery/dist/jquery.js:4292:46)
at Object.jQuery.event.trigger (http://127.0.0.1:9000/bower_components/jquery/dist/jquery.js:4533:12)
at jQuery.fn.extend.triggerHandler (http://127.0.0.1:9000/bower_components/jquery/dist/jquery.js:5241:24)
at removePatch [as remove] (http://127.0.0.1:9000/bower_components/angular/angular.js:2213:21)
at Object.leave (http://127.0.0.1:9000/bower_components/angular/angular.js:4079:17)
at Object.leave (http://127.0.0.1:9000/bower_components/angular-ui-router/release/angular-ui-router.js:2668:49)
at cleanupLastView (http://127.0.0.1:9000/bower_components/angular-ui-router/release/angular-ui-router.js:2717:22)
at http://127.0.0.1:9000/bower_components/angular-ui-router/release/angular-ui-router.js:2739:13

删除ng-grid="gridOptions"解决了这个问题，因此我认为我的冲突发生在ui路由器和ng-grid之间。

有什么见解吗？

编辑：这就是我声明gridOptions的方式。

        $scope.gridOptions = {
        data: 'data',
        plugins: [new ngGridFlexibleHeightPlugin()],
        showSelectionCheckbox: true,
        columnDefs: [{ field: 'username', displayName: 'Name', width: "**" },
            { field: 'email', displayName: 'Email', width: "**"}]
    };

关于ng网格和ui路由器的冲突，这个错误有一个悬而未决的问题，Herve Prot似乎找到了解决方案，我还没有测试它。

build/n-grid.js:中的第952行

   grid.$topPanel.on('$destroy', function() {
           if(grid.$topPanel == null) // FIX ui-router
            return;
                grid.$topPanel.off('mousedown');
                if (grid.config.enableColumnReordering) {
                    grid.$topPanel.off('drop');
                }
                grid.$topPanel = null;
            });

我还发现我需要更改以下内容（参见Alex Choroshin的帖子）

grid.$groupPanel.on('$destroy', function () {
                if (grid.$groupPanel == null) // FIX ui-router
                    return;
                grid.$groupPanel.off('mousedown');
                grid.$groupPanel = null;
            });

它只比建议的修复程序高出几行。

我解决了在ui路由器依赖项之前更改index.html依赖项中jQuery依赖项的顺序的问题。

相关文章：