Not able to access $scope variable from within a controller function in Angular JS

Question

in the view I have:

<div ng-controller="formCtrl">
    <div class="alert alert-success" ng-show={{alert}}>"hey"</div>
</div>

my form:

  <form name="myForm" ng-controller="formCtrl" ng-submit="submit()">...

on my controller, formCtrl, I have:

    $scope.submit = function($scope) {

     $http.post('/add', {brand: this.brand} ).success(function(data){
         this.alert = true;
      });
     //this.alert(true); <-- also tried, did not work
  };

I want to be able to update the alert box when the form is submitted.

So: click alert button on form then: form is submitted then: "alert" gets updated with either success or failure message

I think I the scopes all mixed up. Not sure.

Brian Yeh · Accepted Answer · 2014-01-29 01:45:50Z

Can't see all your code but I think there's multiple issues with it, and you lack fundamental understanding of how scoping works in javascript. I'll try to explain what's going on below but you'll need to understand scoping for complete understanding... I suggest you read http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/ to learn more about scoping.

first off you don't need the submit function to take in a variable. When your submit call doesn't even accept one.

$scope.submit = function($scope) {

can be...

$scope.submit = function() {

because you call the submit function like this...

...ng-submit="submit()">...

Also if you name that input parameter "$scope" it will overwrite the original $scope variable rendering you unable to access it in the submit function.

Instead you can actually access the $scope variable without actually passing it into the submit function because it is within the scope of the controller. Basically any function in the controller will have access to $scope without you having to pass it in as a parameter. So in short your code should look like this...

$scope.submit = function() {

     $http.post('/add', {brand: this.brand} ).success(function(data){
         $scope.alert = true;
      });
  };

Collectives™ on Stack Overflow

Not able to access $scope variable from within a controller function in Angular JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related