Angular binding variable not being set from $http scope

Question

Im new to angular and I'm trying to create a simple Signup Form which posts to a database (in json).

If the database write is successful, "this.msg" is set to "Post Data Submitted Successfully!"

If the database write is unsuccessful, "this.msg" is set to "Service does not Exists"

<row ng-controller="appController as app">
    <div>
        Username : <input ng-model="app.regUsername" /> 
        Password : <input ng-model="app.regPassword" />         
        <input type="button" value="Register" ng-click="app.postdata(app.regUsername, app.regPassword)" /> 
    </div>
        <p>Output Message :{{app.msg}}</p>
</row>

However I cant get this.msg to print out in my HTML. Everything seems to be working fine, no console errors, this.msg exists, the database write is ok.

app.controller('appController', ['$http', function ($http) {
    this.name = null;
    this.password = null;

this.postdata = function (name, password) {

    var data = {
        name: name,
        password: password
    };

    $http.post('https://my-project.com/.json', JSON.stringify(data)).then(function (response) {
        if (response.data){
            this.msg = "Post Data Submitted Successfully!";
            console.log(this.msg) //works fine;
        }
    }, function (response) {
            this.msg = "Service does not Exists";
            console.log(this.msg) //works fine
    });
};

All I can presume is that there is a scope issue and {{app.msg}} is somehow outside of this scope

it's all about the scope, this changes the scope everytime — Dhaval Marthak
– Dhaval Marthak, Commented Sep 19, 2017 at 10:25

Dhaval Marthak · Accepted Answer · 2017-09-19 10:28:23Z

3

You need to assign scope to another variable, this is executed with the context of post()

Try this

app.controller('appController', ['$http', function ($http) {
    self = this; // <-- add this
    self.name = null;
    self.password = null;

    self.postdata = function (name, password) {

        var data = {
            name: name,
            password: password
        };

        $http.post('https://my-project.com/.json', 
              JSON.stringify(data)).then(function (response) {
            if (response.data){
                self.msg = "Post Data Submitted Successfully!";
                console.log(self.msg) //works fine;
            }
        }, function (response) {
                self.msg = "Service does not Exists";
                console.log(self.msg) //works fine
        });
    };

answered Sep 19, 2017 at 10:28

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

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

2 Comments

Kevin Over a year ago

is "self" a type of keyword? how do i access this from my html ? would it be app.self.username?

Dhaval Marthak Over a year ago

No, it would be app.username, there should not be any change inside the template :)

Vasil Nikolov · Accepted Answer · 2017-09-19 10:27:28Z

1

Try this

app.controller('appController', ['$http', function ($http) {
  this.name = null;
  this.password = null;
  var appCtrl = this;

  this.postdata = function (name, password) {

    var data = {
      name: name,
      password: password
    };

    $http.post('https://my-project.com/.json', JSON.stringify(data)).then(function (response) {
      if (response.data) {
        appCtrl.msg = "Post Data Submitted Successfully!";
        console.log(appCtrl.msg) //works fine;
      }
    }, function (response) {
      appCtrl.msg = "Service does not Exists";
      console.log(appCtrl.msg) //works fine
    });
  };

answered Sep 19, 2017 at 10:27

Vasil Nikolov

1,12010 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular binding variable not being set from $http scope

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