使用 ngResource 解析服务中的业务处理

Question

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

我有我的 NavbarComponent，我在其中声明了我的控制器，我在其中注入了名为 NavbarService 的服务。在 NavbarService 中，我注入了一个工厂资源来进行我的 Rest 调用，一旦这个调用被调用，我试图在 return 返回控制器之前对响应进行一些处理，在这个例子中我只是应用一个简单的过滤器，但它不起作用。如果我省略我的处理并且 return 只有类别，代码可以工作，你可以想象一个包含两个的列表。

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

    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 查询的 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 解析服务中的业务处理

resolving business treatment in service with ngResource

javascript

angularjs

ngresource

angular-promise