未知提供者：ngGridProvider < - ngGrid

我正在嘗試創建一個簡單的ngGrid示例。我的代碼基於angular-seed。未知提供者：ngGridProvider < - 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 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'}); 
}]);

終於，我的控制器包括其中的網格示例代碼：

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

來源

2013-11-02 nyl66

在這一行：

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

你注入ngGrid服務到您的控制器。實際上沒有這樣的東西，例如ngGrid服務（注意你實際上並沒有在那個控制器的任何地方使用它）。只是不要注入ngGrid到你的控制器，你不會得到那個錯誤。

來源

2013-11-02 05:24:25 dtabuenc

有一個指令，但不是服務。這些例子和文檔都沒有顯示ngGrid被注入控制器，更不用說你會用它做什麼了。 – dtabuenc

不用擔心，謝謝你的幫助！ – dtabuenc

感謝球員，Angular的新手，並在自動駕駛儀上運行，將ngGrid添加到控制器中 – nyl66

未知提供者：ngGridProvider < - ngGrid

回答

相關問題