2016-06-18 1 views
0

Привет, друзья. Я новичок в угле и выяснил, как обращаться с данными от контроллера к контроллеру. Пожалуйста, проверьте мой код нижеданные вызова из службы в контроллере с использованием углового 1.5

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. Пожалуйста, помогите моим ребятам

ответ

1

Вы не можете ввести $scope для обслуживания, потому что он может быть связан только с контроллером. $scope.$apply() следует вызывать из контроллера, когда служба завершает работу.

Кроме того - избавиться от "успеха" и методы "ошибки", they're deprecated:

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

Ваш код должен выглядит, как показано ниже:

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 звонок. Затем, в контроллере, мы можем разрешить данные и манипулировать с помощью области.

+0

Спасибо за помощь, но я все еще получаю ошибку 'Ошибка: $ http не определен' после использования вашего кода ... пожалуйста, chck – Kamal

+0

@ Kamal, о, мой плохой, я забыл ввести '$ http' для обслуживания. Я исправил код. – itachi

+0

ok .. но теперь я получаю 'productlist is not function' в консоли :( – Kamal

0

@ Kamal, вам необходимо ввести $ http в ваш сервис. Не могли бы вы удалить $ scope из своего сервиса .. Убедитесь, что зависимость определена и исправит проблему

Смежные вопросы