AngularJS自定义过滤器未知提供者错误
我创建了这个过滤器来将userID转换为用户名：
angular.module('idToName', ['userService'])
.filter('idToName', function(User) {
User.allUsers()
.success(function(data) {
userData = data;
});
var assignee;
return function(IDs) {
for (var j = 0; j < userData.length; i++) {
for (var i = 0; i < IDs.length; j++){
if (IDs[i] == userData[j]._id) {
assignee[i] = userData[j].firstname + ' ' + userData[j].lastname + ' ' + userData[j].cname;
}
}
}
return assignee;
}
})
这需要在一个阵列userIDs ，它应该找到相应的userData对象，并返回其名称。
但是当我运行它时，它会得到这个错误：
Error: $injector:unpr
Unknown Provider
Unknown provider: idToNameFilterProvider
那么我做错了什么？ 我将不胜感激任何帮助。
请检查工作演示：JSFiddle
angular.module('idToName', [])
.factory('userService', ['$http', function ($http) {
var users = [];
return {
all: function () {
return $http.get('http://jsonplaceholder.typicode.com/users');
}
};
}])
.filter('idToName', function () {
var assignee = [];
return function (userData, IDs) {
if (!userData || userData.length === 0) {
return 'loading...';
}
for (var i = 0; i < userData.length; i++) {
for (var j = 0; j < IDs.length; j++) {
if (IDs[j] == userData[i].id) {
assignee[i] = userData[i].name + ' ' + userData[i].username + ' ';
}
}
}
return assignee;
}
})
.controller('MyCtrl', ['$scope', 'userService', function ($scope, userService) {
$scope.IDs = [1, 2, 3, 4];
$scope.users = [];
userService.all().success(function (data) {
$scope.users = data;
});
}]);
在HTML中使用它：
<div ng-app="idToName" ng-controller='MyCtrl'>{{ users | idToName:IDs }}</div>
代码中的一些问题：
您的userData是异步获取的，当您调用过滤器时， userData可能尚未到达。 而你的过滤器不应该获取数据。 因为这不是它的工作。 你最好把数据获取逻辑分离成一些独立的逻辑。 所以我创建了另一个服务userService
你嵌套for循环与i和j变量混淆。 我让他们工作。
idToName不是一个好的模块名称。
更新1
从@ tuckerjt07和@ach的评论中了解到，请检查您的JavaScript包含和模块相关性代码。 尝试注入过滤器时一定会有错误。 似乎在上下文中找不到过滤器本身。
链接地址: http://www.djcxy.com/p/28145.html