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”。然后，您可以在同一页面上包含多个视图。

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

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

1 个答案: