Question

嗨朋友我是角色的新手，并想知道如何从服务到控制器调用数据。请检查下面的代码

data.json

[{
    "brandname" : "VU",
    "image" : "images/1.jpeg",
    "detail" : "Vu 102cm (40) Full HD LED TV",
    "price": "20,000",
    "productId" : "001"

},{
    "brandname" : "Micromax",
    "image" : "images/52.jpeg",
    "detail" : "Micromax 81cm (31.5) HD Ready LED",
    "price": "12,489",
    "productId" : "052"

}]

contoller.js

var appProduct = angular.module('assignment', []);

appProduct.service('productlist', ['$scope', function($scope){
  $http({method : 'GET',url : 'js/data.json'})
            .success(function(data, status) {
                $scope.items = data;
                //console.log(data)
            })
            .error(function(data, status) {
                alert("Error");
            });
        setTimeout(function(){
          $scope.$apply();
        },1);
}])



appProduct.controller('productGrid', function($scope, $http, productlist){

  $scope.item = productlist.items;
  console.log(productlist.items)

})

上面提到的代码在控制台Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- productlist中给出了错误。请帮助我的家伙

Answer 1

您不能将$scope注入服务，因为它只能绑定到控制器。当服务完成其工作时，应该从控制器调用$scope.$apply()。

另外 - 摆脱＆＃34;成功＆＃34;和＆＃34;错误＆＃34;方法，they're deprecated：

$ http遗留承诺方法成功与错误已被弃用。请改用标准方法。如果$ httpProvider.useLegacyPromiseExtensions设置为false，则这些方法将抛出$ http / legacy错误。

您的代码应如下所示：

var appProduct = angular.module('assignment', []);

appProduct.service('productlist', ['$http', function($http) {
    return {
        getProducts: function() {
            return $http.get('js/data.json')
                .then(function(response) {
                    return response.data;
                }, function() {
                    return "Error while fetching data";
                });
        }
    }
}]);



appProduct.controller('productGrid', ['$scope', '$http', '$timeout', 'productlist', function($scope, $http, $timeout, productlist) {
    productlist.getProducts().then(function(data) {
        $timeout(function() {
            $scope.items = data;
        });
    }, function(data) {
        console.log(data);
    });
}]);

以下是此工作的Plunker：Plunker

服务正在从$http电话回复承诺。然后，在控制器中，我们可以解析数据并使用范围进行操作。

Answer 2

@ Kamal，您需要在服务中注入$ http。你可以从服务中删除$ scope吗？确保定义依赖关系并解决问题

使用角度1.5从控制器中的服务调用数据

2 个答案: