加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJS自定义筛选器未知提供程序错误

发布时间:2020-12-17 08:52:13 所属栏目:安全 来源:网络整理
导读:我创建了这个过滤器,将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 u
我创建了这个过滤器,将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;
  }
})

它接收一个userID数组,它应该找到相应的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包含和模块依赖关系代码.尝试注入过滤器时一定有问题.似乎在上下文中找不到过滤器本身.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读