Angular reference error $scope not defined

Question

I am new to angular and I am trying to list my data in database .However I am gettin $scope not defined error..This is my code

 productsService
           .getProducts()
           .success(function (data, status, headers, config) {

               $scope.products = data;

               console.log($scope.products);
           })
           .error(function (error) {
               //Showing error message 
               $scope.status = 'Unable to retrieve product' + error.message;
           });

In my product Service I have

return {
            getProducts: function () {

                return $http({
                    method: 'GET',                        
                    url: '/api/Products'
                }).success(function (data) {
                    alert("success");
                   // console.log(data);
                }).error(function (error) {
                    //Showing error message 
                    alert("failed");
                    $scope.status = 'Unable to retrieve products' + error.message;
                    console.log($scope.status);
                });

            },

I am just getting failed alert. Please help!!!In backend I am able to get the data from database.

GregL · Accepted Answer · 2014-10-17 06:00:39Z

1

In an Angular service, you do not have access to the $scope, that is something you only have in directives and controllers. That is why you are getting an error about $scope being undefined.

Also, in your service you are returning a promise from your getProducts() method, yet you are also adding success and error handlers on to it. You should make up your mind whether you want to return the raw $http promise, or if instead you want to return a $q promise which is resolved with some transformed copy of the data returned in the $http().success() handler.

One final thing, if you are seeing the "failed" alert, that means your server is returning an error when you submit a request to /api/Products. If you go to that URL in your browser, does it work? You should look into why a basic GET request to that URL is not working.

answered Oct 17, 2014 at 6:00

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philomath Over a year ago

i tried directly accessing the api/products and I am getting some error which I have no clue of Error> <Message>An error has occurred.</Message> <ExceptionMessage> The 'ObjectContent`1' type failed to serialize the response body for content type 'application/xml; charset=utf-8'. </ExceptionMessage> <ExceptionType>System.InvalidOperationException</ExceptionType> <StackTrace/>

Yasser Shaikh · Accepted Answer · 2014-10-17 06:31:40Z

1

You should not uses scope variables in your service, you service should only be used to get/update/share some data.

Here is how your service should look like

Service

return {
    getProducts: function() {
        return $http({
            method: 'GET',
            url: '/api/Products'
        });
    },

and in your controller for that service method you can have a .success() and .error() which you can use to set your error messages.

Controller

productsService
   .getProducts()
   .success(function (data, status, headers, config) {
       $scope.products = data;
   })
   .error(function (error) {
       $scope.status = 'Unable to retrieve product' + error.message;
   });

Hope this helps.

answered Oct 17, 2014 at 6:31

Yasser Shaikh

47.9k50 gold badges208 silver badges289 bronze badges

Collectives™ on Stack Overflow

Angular reference error $scope not defined

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related