gpt4 book ai didi

angularjs - 未知的提供者 : ngGridProvider <- ngGrid

转载 作者:行者123 更新时间:2023-12-01 09:28:02 26 4
gpt4 key购买 nike

我正在尝试创建一个简单的 ngGrid 示例。我的代码基于 angular-seed。

我的 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'});
}]);

最后,我的 Controller 在其中包含了 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

最佳答案

在这一行:

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

您正在将 ngGrid 服务注入(inject)到您的 Controller 中。实际上没有像 ngGrid 服务这样的东西(注意你实际上并没有在该 Controller 的任何地方使用它)。只是不要将 ngGrid 注入(inject)你的 Controller ,你就不会得到那个错误。

关于angularjs - 未知的提供者 : ngGridProvider <- ngGrid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19738327/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com