javascript - 使用ngResource解决服务中的业务处理

Question

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

我有我的 NavbarComponent，我在其中声明了我的 Controller ，并在其中注入(inject)了名为 NavbarService 的服务。 在 NavbarService 中，我注入(inject)一个工厂资源来进行 Rest 调用，一旦进行此调用，我将尝试在将响应返回到 Controller 之前对响应进行一些处理，在本示例中，我只是对其应用了一个简单的过滤器，但它不起作用。如果我省略处理并仅返回类别，则代码将起作用，并且您可以可视化两个列表。

我可以在 Controller 中进行处理，但这是一个不好的做法，因为我相信它应该在服务中完成，其次，因为它是异步响应，我必须做这样的事情才能使其工作，这真的很重要丑陋:

    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

另一种简单的方法是将回调函数从组件传递给服务，如下所示

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