AngularJS: $scope is not defined?

Question

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()


    });

$scope only available in controller. – hylimR May 05 '16 at 11:05 — hylimR, May 05 '16 at 11:05

score 4 · Accepted Answer · edited May 23 '17 at 12:24

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

nice explanation. But i think `$sails.post("/api/user",data)` is not outside the service, it is inside. Am i wrong? — Avantika Saini, May 05 '16 at 11:17
@maythesource.com i'm using .service not factory is this the same ? — letseasy, May 05 '16 at 11:42
@letseasy it's not the exact same as services are singletons and factories return objects. I changed the rough code to a service: http://stackoverflow.com/questions/13762228/confused-about-service-vs-factory — Menelaos, May 05 '16 at 11:50
@maythesource.com one question : I dont undestand this line return $http.post(path,data); what do u mean about promise ? — letseasy, May 05 '16 at 15:58
post of $http returns an httpPromise once tha result comes back. See: https://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. — Menelaos, May 05 '16 at 18:12

Rahul Nikate · Answer 2 · 2016-05-05T11:12:39.813

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) {


  }]);

edited May 05 '16 at 11:12

answered May 05 '16 at 10:57

Rahul Nikate

6,192
5
42
54

While this is the minification safe way to inject dependencies, his current method does work without minification. The problem is with his `Signup` service. – Adam Nierzad May 05 '16 at 11:02

AngularJS: $scope is not defined?

2 Answers2

Intro

Quick Rough Example