AngularJS 自定义过滤器未知提供商错误

Question

我创建了这个过滤器来将 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 对象和 return 它的名称。

但是当我运行它时，它得到这个错误：

Error: $injector:unpr
Unknown Provider

Unknown provider: idToNameFilterProvider

那我做错了什么？如果有任何帮助，我将不胜感激。

Answer 1

请检查工作演示：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 包含和模块依赖代码。尝试注入过滤器时一定有问题。似乎在上下文中找不到过滤器本身。

AngularJS 自定义过滤器未知提供商错误

AngularJS custom filter unknown provider error

angularjs

angularjs-filter

更新 1