javascript - AngularJS - 在 POST 请求中使用 this 与 $scope

标签 javascript angularjs angularjs-scope http-post this

<分区>

我已经阅读了几篇关于使用 this 而不是 $scope 的文章,反之亦然,但总的来说,作为 javascript 的新手,我觉得我'我仍然缺少一些东西。

下面是我执行POST 请求 的代码示例。但是当我进入方法内部时,我的 formData 对象是空的。但是,如果我将它从 this 更改为 $scope,它就会起作用,但我很难理解为什么会这样。

代码:

var app = angular.module('TM', []);

app.controller('tableController', function($scope, $http){

    //Empty object that gets filled with data and sent as a POST request.
    this.formData = {};

    // Define process for submitting form
    //TODO: FIND OUT THE DIFFERENCE BETWEEN $SCOPE AND THIS
    this.processForm = function() {
        console.log('Inside processForm method');

        $('#addEntry').modal('hide');
        console.log($scope.formData); //If I use this here - the object is empty
        $http({
            method : 'POST',
            url :'../protocols',
            data : JSON.stringify($scope.formData), 
            headers : {
                'dataType' : "json",
                'contentType' : "application/json"
            }
        })
        .success(function(data) {
            console.log('Success: ' + data);

            //Empties the object after the POST request is done...
            $scope.formData = {}
        })
        .error(function(data){
            console.log('Error ' + data);
        });
    };
});

最佳答案

你需要意识到 Javascript 有多个 scopes并且 this 关键字指的是您正在操作的范围。

然后,就像@Henri S 提到的那样,您还应该意识到您的 Controller 的范围,它是一个 JavaScript 构造函数,与您在内部使用的 $scope 不同。 Angular 使用的 $scope 是一个与 Controller 关联的对象, Controller 实际上是一个 View 模型。在某个 Controller 的控制下,您的 HTML 可以“访问”该对象。如果您创建 Controller 链,则 $scope 将为 prototypically继承。

如果我们将此应用于您的代码:

var app = angular.module('TM', []);

app.controller('tableController', function($scope, $http){

   var self = this; //We capture a reference/value of the scope of your controller

    this.formData = {};
    this.currentDataObject : {restURL: "../protocols"} 

    // Define process for submitting form
    this.processForm = function() { //Here begins a new javascript scope
        console.log('Inside processForm method');

        $('#addEntry').modal('hide');
        console.log(self.formData); // this will refer to the this.formdata

        $http({
            method : 'POST',
            url : self.currentDataObject.restURL,
            data : JSON.stringify(self.formData), 
            headers : {
                'dataType' : "json",
                'contentType' : "application/json"
            }
        })
        .success(function(data) {
            console.log('Success: ' + data);

            //Empties the object after the POST request is done...
            self.formData = {}
        })
        .error(function(data){
            console.log('Error ' + data);
        });
    };
});

关于javascript - AngularJS - 在 POST 请求中使用 this 与 $scope,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31310422/

相关文章:

javascript - Angular 工厂中的 $http 内部的 $http

angularjs - AngularJS 中的动态下拉选择不起作用

javascript - jQuery 1.7 .on() 事件委托(delegate)不适用于禁用元素上的选择器

javascript - 使用 x-editable 使不同的元素在单击时可编辑

javascript - 如何实时比较 2 个表单输入

javascript - AngularJS - 应用程序内异步加载部件

css - 如何在 ngRepeat 元素上使用 ngAnimate?

javascript - 如何手动编译指令?

javascript - 基于jQuery中Ajax响应的表单提交

JavaScript 未捕获语法错误 : Unexpected token ILLEGAL