0

I've started learning Angular JS ,I keep getting '$scope is not defined' console errors for this controller code in AngularJS: any idea ?

Service :signup.js

    'use strict';

angular.module('crud')
  .service('Signup',function () {

         var data={
        email:$scope.email,password:$scope.password,confirmPassword:$scope.confirmPassword  
    }
    //console.log(data);
    $sails.post("/api/user",data)
      .success(function (data, status, headers, jwr) {
            $scope.users=data;


        //$scope.user=data;
      })
      .error(function (data, status, headers, jwr) {

       console.log(data);
       //console.log(headers);
        alert('Houston, we got a problem!');
      });       



  });

Signupcontroller.js

 'use strict';

    angular.module('crud')
      .controller('SignupCtrl', function ($scope,Signup) {


        // Using .success() and .error()


    });
Improve this question
1
  • 3
    $scope only available in controller. Commented May 5, 2016 at 11:05

2 Answers 2

Reset to default
4

Intro

Have a look at the following answer: https://stackoverflow.com/a/22899880/1688441

You should not be trying to directly use $scope from a service since it isn't available. The $scope of your controller will contain some variables/objects that you could then pass to your service through calls.

The answer to https://stackoverflow.com/a/22899880 shows a correct way of implementing what you wish to do and is nearly the structure you essentially need (with different names).

Obviously you will need to make changes such as, rewriting his save method method to perform the HTTP post and contact the server with a response to the login request. Also since http requests are asynchronous it may be better to use a resource. See: https://docs.angularjs.org/api/ngResource/service/$resource

Quick Rough Example

angular.module('crud').service('SignupService', ['$http', function ($http) {
    var path = '/api/user';

    var loginHttpPost = function (data) {
        return $http.post(path,data);   //Return the promise, or instead of a service make a resource, see: https://docs.angularjs.org/api/ngResource/service/$resource      
    };  
}])

angular.module('crud').controller('SignupCtrl', function ($scope,SignupService) {

        $scope.login = function () {
           var data={email:$scope.email,password:$scope.password,confirmPassword:$scope.confirmPassword}; 

           //HTTP calls are asynchronous. Maybe better to use resource. Must use promise.

           SignupService.loginHttpPost(data).success(function (data) {
                //Do whatever is needed
                $scope.loginResults = //assign result
           }).error(function (data) {
                //Do whatever is needed
                $scope.loginResults = //assign result
           });  
        };
    }
]);
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

nice explanation. But i think $sails.post("/api/user",data) is not outside the service, it is inside. Am i wrong?
@maythesource.com i'm using .service not factory is this the same ?
@letseasy it's not the exact same as services are singletons and factories return objects. I changed the rough code to a service: stackoverflow.com/questions/13762228/…
@maythesource.com one question : I dont undestand this line return $http.post(path,data); what do u mean about promise ?
post of $http returns an httpPromise once tha result comes back. See: docs.angularjs.org/api/ng/service/$http#post . Have a good read of that doc and note most calls are asynchronous meaning the http call is initiated on another thread and your remaining code is executed. Only the callback functions assigned to the promise with success or error are executed after the http request.
0

You are not correctly injecting $scope and the service Signup. Also $scope is only available in controller. So you need to pass it to service from controller.

Below is the right way of doing it.

 'use strict';

  angular.module('crud')
  .controller('SignupCtrl',['$scope','Signup', function ($scope,Signup) {


  }]);
Improve this answer

1 Comment

While this is the minification safe way to inject dependencies, his current method does work without minification. The problem is with his Signup service.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.