Question

我有一个使用组件和几个模块的AngularJs应用程序。我创建了一个plunker示例来展示我的问题here。

我有我的NavbarComponent，我在其中声明了我的Controller，我注入了名为NavbarService的服务。在NavbarService中，我注入了一个工厂资源来进行我的Rest调用，一旦进行了这个调用，我试图对响应做一些处理，然后再将它返回给控制器，在这个例子中，我只是对它应用一个简单的过滤器，但它不起作用。如果我省略了我的处理并仅返回类别，则代码可以工作，您可以看到两个列表。

我可以在控制器中进行治疗，但这是一种不好的做法，因为我认为它应该在服务中完成，其次因为它是异步响应我必须做这样的事情才能使它工作，这真的是真的丑：

    navbarService.getCategories().$promise.then(function (response) {
                console.log("controller", response[0].category);
                vm.categories = categoryFilter(response[0].category);
            }, function (error) {
               console.log("an error occured");
            });

有人可以指导我完成这个，我没有解决方案。谢谢

Answer 1

你的过滤器应该是这样的，它应该在$ resource查询而不是service中的transformResponse中调用，我希望这会对你有帮助

'use strict';

 angular.module('navbar').filter('category', function() {
  return function(categories) {
    var categoryIds = ['World'];
    var result = [];
    angular.forEach(categoryIds, function (categoryId) {
        angular.forEach(categories, function (category) {
            if (category.name == categoryId) { 
              console.log("Match"); 
                result.push(category);
            }
        });
    });
    return result;
   };
 });

您的categoryResource.service应该是这样的

 angular.module('shared').factory('categoryResourceService', 
   ['$resource','categoryFilter', function($resource, categoryFilter) {
     var provider = "categories.json"; 
     var params = { 
               id: '@id'
           };
     return $resource(provider, params, {
         query: {
           isArray: true,
           method: 'GET',
           params: {},
           transformResponse: function(categories) { 
                var results = categoryFilter(angular.fromJson(categories));  
                console.log("[categoryResourceService] filtered response:", results);
                return results;
           }
        }
    });
 }]);

navbar.service应该就像这样

 'use strict';

angular.module('navbar')
.service('navbarService', [ 'categoryResourceService', function (categoryResourceService) {
    var vm = this; 
vm.getCategories = function(){
  vm.categories = categoryResourceService.query(function(response){
    console.log("[NavbarService] response:", response); 
  }, function(error){
    console.log("[NavbarService] error:", error);
  });
  return vm.categories;  
 }

}]);

和这样的组件

'use strict';

angular.module('navbar').component('appNavbar', {
   templateUrl: "navbar.template.html",
   controller: [ 'navbarService', function appNavbarController(navbarService) {
   var vm = this; 
   vm.categories = navbarService.getCategories();
 }]
});

Answer 2

另一种简单的方法是将回调函数传递给来自您组件的服务，如

 'use strict';

angular.module('navbar').component('appNavbar', {
     templateUrl: "navbar.template.html",
     controller: [ 'navbarService', function appNavbarController(navbarService) {
         var vm = this; 
         navbarService.getCategories(function(data){
             // this will be called when service will get the response and filter function has filtered the response
             vm.categories = data;
         });
      }]
});

现在服务应该是这样的

 'use strict';

angular.module('navbar').service('navbarService', ['categoryResourceService', 'categoryFilter', function(categoryResourceService, categoryFilter) {
var vm = this;
vm.getCategories = function(callback) {
  categoryResourceService.query(function(response) {
    console.log("[NavbarService] response:", response);
    callback(categoryFilter(response));
  }, function(error) {
    console.log("[NavbarService] error:", error);
  });
  //return vm.categories;  
}

}]);

过滤器就像这样

  'use strict';

  angular.module('navbar').filter('category', function() {
   return function(categories) {
    var categoryIds = ['World'];
    var result = [];
     angular.forEach(categoryIds, function (categoryId) {
     angular.forEach(categories, function (category) {
          if (category.name == categoryId) { 
             console.log("Match"); 
             result.push(category);
          }
      });
    });
   return result;
  };
});

使用ngResource解决服务中的业务处理问题

2 个答案: