2013-11-02 5 views
2

Я пытаюсь создать простой пример ngGrid. Мой код основан на угловом семени.Неизвестный поставщик: 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'}); 
}]); 

и, наконец, мой контроллер включает в себя код образца сети 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 

ответ

7

В этой строке:

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

Вы нагнетание ngGrid службу в контроллер. На самом деле нет такой вещи, как услуга ngGrid (обратите внимание, что вы вообще не используете ее нигде в этом контроллере). Просто не вводите ngGrid в ваш контроллер, и вы не получите эту ошибку.

+0

Существует директива, но не услуга. Ни один из примеров, ни документация никогда не показывали, что ngGrid вводится в контроллер, не говоря уже о том, что вы с ним делаете. – dtabuenc

+0

Не стоит беспокоиться, спасибо за то, что он потрогал! – dtabuenc

+0

спасибо, ребята, новый для Angular и работал на автопилоте, добавляя ngGrid к контроллеру – nyl66

Смежные вопросы