Angular JS ng-grid 与路由提供程序一起使用时不填充数据

Question

我正在尝试使用 ng-Grid 显示数据。问题在于路由提供程序，当我使用单独的视图来显示数据时，它没有被显示，但是如果我在没有路由提供程序的情况下执行完全相同的代码，并且只加载该页面，它就可以正常工作。下面是我的代码

Index.html：

            <div ng-view></div>
            <!-- JQuery ================================================================ -->
            <script src="<%=request.getContextPath()%>/js/jquery-2.0.3.js"></script>

            <!-- AngularJS ============================================================= -->
            -->
            <script src="/lib/angular/angular.js"></script>
            <script src="/lib/angular/angular-resource.js"></script>
            <script type="text/javascript" src="/js/ng-grid-2.0.7.min.js"></script>

            <!-- AngularJS App Code ==================================================== -->
            <script src="<%=request.getContextPath()%>/js/app.js"></script>
            <script src="<%=request.getContextPath()%>/js/controllers.js"></script>

List.html：

    <div  class="gridStyle" ng-grid="gridOptions"></div>

app.js：

        angular.module('ngdemo', ['ngdemo.controllers','ngGrid']).
            config(['$routeProvider', function ($routeProvider) {
                $routeProvider.when('/home', {templateUrl: 'list.html', controller: 'UserListCtrl'});
                $routeProvider.otherwise({redirectTo: '/home'});
            }]);

//Controller to bind data to the ng-Grid

controller.js

        var app = angular.module('ngdemo.controllers', ['ngGrid']);

        app.controller('UserListCtrl',function ($scope) {

         $scope.myData = [{"color": "red","value": "#f00"}];         
         $scope.gridOptions = { data: 'myData' }; 
});

它显示的错误如下：

TypeError: Cannot call method 'replace' of undefined
    at new C (xxx/js/ng-grid-2.0.7.min.js:1:12069)
    at xxx/js/ng-grid-2.0.7.min.js:1:25099
    at Array.forEach (native)
    at Object.forEach (xxx/lib/angular/angular.js:130:11)
    at w.buildColumns (xxx/js/ng-grid-2.0.7.min.js:1:25064)
    at g.filteredRowsChanged (xxx/js/ng-grid-2.0.7.min.js:2:5200)
    at i.evalFilter (xxx/js/ng-grid-2.0.7.min.js:2:9164)
    at Object.n (xxx/js/ng-grid-2.0.7.min.js:2:17009)
    at Object.applyFunction [as fn] (<anonymous>:778:50)
    at Object.Scope.$digest (xxx/lib/angular/angular.js:7942:27)

Answer 1

是的，问题是您正在使用路由提供程序来显示您的数据，并且您试图一次在同一页面上包含多个视图；这是做不到的。

解决方案

如果您想在同一页面上包含多个视图，则需要使用 "ui-router" 而不是 "ng-route"。然后，您可以在同一页面上包含多个视图。

以下是选择 ui-router 而不是 ng-route 的一些常见原因。
ui-router 允许nested views 和multiple named views。这对于较大的应用程序非常有用，因为您可能拥有从其他部分继承的页面。