$scope undefined in Angularjs

Question

I'm creating an Angular app for learning (I'm all new to Angular) and currently stuck at this point.

Following is my Angular controller

cookingPad.controller('RecipeCreateController', function($scope, $http) {

  $scope.recipeSave = function($scope, $http){
    //code
  }; 

});

Following is my form

<form id="signup-form_id" ng-submit="recipeSave()">
  //some html
  <input type="text" name="name" ng-model="recipeFormData.name" id="name" class="form-control input-lg no-border-radius" placeholder="Name">
  // some more html
  <button class="btn btn-lg btn-success" id="save1" type="submit"><i class="fa fa-save"></i> Save</button>
</form>

So when I enter something in the text box and click save it comes inside the recipeSave function. but when I check the $scope variable with chrome dev tools, it shows it as

$scope undefined

What could be the reason? Everything else in my Angular works im on Angular 1.2.4, I found several SO questions but none of them works for me.

Peter Lyons · Accepted Answer · 2014-08-29 00:28:25Z

3

Don't re-declare the controller args in recipeSave:

$scope.recipeSave = function() {

Make that change and things should start working. Your template is explicitly invoking recipeSave() with no arguments, and you want to access your controller arguments via closure anyway, which will work fine.

answered Aug 29, 2014 at 0:28

Peter Lyons

147k32 gold badges285 silver badges281 bronze badges

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

2 Comments

sameera207 Over a year ago

@Peter Lyons, thanks got it working... yours and Seminda's example

sameera207 Over a year ago

@Seminda, thanks got it working with your example, BTW I think I know u back in SL, did u work at DPIT ?! :)

HeberLZ · Accepted Answer · 2014-08-29 00:28:57Z

1

This is due to the recipeSave method having $scope and $http as arguments. Dependency Injection works on the Controller/Service/Filter/etc level, atributes from different scopes as recipeSave won't solve dependency injection.

In other words, on the view you are not passing parameters when you execute the recipeSave function, so the function gets undefined as the value of both parameters.

Cheers

answered Aug 29, 2014 at 0:28

HeberLZ

14.2k4 gold badges25 silver badges24 bronze badges

Collectives™ on Stack Overflow

$scope undefined in Angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related