javascript - 未从 $http 范围设置 Angular 绑定(bind)变量

Question

我是 Angular 新手，我正在尝试创建一个简单的注册表单，该注册表单会发布到数据库(以 json 格式)。

如果数据库写入成功，“this.msg”将被设置为“发布数据提交成功!”

如果数据库写入不成功，“this.msg”将被设置为“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>

但是我无法让 this.msg 在 HTML 中打印出来。一切似乎都工作正常，没有控制台错误，this.msg 存在，数据库写入正常。

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

我只能推测存在范围问题，并且 {{app.msg}} 超出了此范围

Answer 1

您需要将作用域分配给另一个变量，this 是在 post() 的上下文中执行的

试试这个

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