解決與ngResource服務的業務處理

Question

我有一個AngularJs應用程序與組件和幾個模塊一起工作。我創建了一個笨蛋的例子來展示我的問題here。

我有我的NavbarComponent在那裏我宣佈我的控制器，我注入我的服務稱爲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

另一種簡單的方法是通過一個回調函數從您組件服務這樣

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

Answer 2

你的過濾器應該是這樣的，它應該在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(); 
}] 
});