3

我正在尝试创建一个简单的 ngGrid 示例。我的代码基于角种子。

我的 index.html：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <link rel="stylesheet" href="lib/ng-grid/2.0.7/ng-grid.css">
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
    <li><a href="#/users">users</a></li>
</ul>

<div ng-view></div>

<div>Angular seed app: v<span app-version></span></div>

<script src="lib/angularjs/1.2.0-rc.3/angular.js"></script>
<script src="lib/angularjs/1.2.0-rc.3/angular-route.js"></script>

<script src="lib/jquery/2.0.3/jquery.js"></script>
<script src="lib/ng-grid/2.0.7/ng-grid.js"></script>

<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>

我的模板文件只有网格 div：

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

我的 app.js 是：

'use strict';

// Declare app level module which depends on filters, and services
angular.module('myApp', [
  'ngRoute',
  'ngGrid',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
])
.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/users', {templateUrl: 'partials/users.html', controller:     'UsersCtrl'});
  $routeProvider.otherwise({redirectTo: '/users'});
}]);

最后，我的控制器在其中包含 ng 网格示例代码：

angular.module('myApp.controllers', []).
  controller('UsersCtrl', ['$scope', '$http', 'ngGrid', function($scope, $http, ngGrid) {

    $scope.filterOptions = {
        filterText: "",
        useExternalFilter: true
    };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [250, 500, 1000],
        pageSize: 250,
        currentPage: 1
    };
    $scope.setPagingData = function(data, page, pageSize){
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
        $scope.myData = pagedData;
        $scope.totalServerItems = data.length;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };
    $scope.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            var data;
            if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get('/api/users').success(function (largeLoad) {
                    data = largeLoad.filter(function(item) {
                        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    $scope.setPagingData(data,page,pageSize);
                });
            } else {
                $http.get('/api/users').success(function (largeLoad) {
                    $scope.setPagingData(largeLoad,page,pageSize);
                });
            }
        }, 100);
    };

    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

    $scope.$watch('pagingOptions', function (newVal, oldVal) {
        if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);
    $scope.$watch('filterOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);

    $scope.gridOptions = {
        data: 'myData',
        enablePaging: true,
        showFooter: true,
        totalServerItems: 'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions
    };

 }]);

我收到以下错误：

Error: [$injector:unpr] Unknown provider: ngGridProvider <- ngGrid
4

1 回答 1

8

在这一行：

controller('UsersCtrl', ['$scope', '$http', 'ngGrid', function($scope, $http, ngGrid)

您正在将ngGrid服务注入控制器。实际上没有ngGrid服务这样的东西（请注意，您实际上并没有在该控制器的任何地方使用它）。只是不要注入ngGrid你的控制器，你就不会得到那个错误。

于 2013-11-02T05:24:25.033 回答