从发送 http post 请求的 submit() 更改 $scope 变量

Question

我无法在 $http.post 请求的成功响应中设置 $scope 的值。 post 请求是通过 submit() 函数从使用 ng-submit="submit()".

的表单提交中发送的

chatApp.controller('createController', ['$scope', '$http', '$location', function($scope, $http, $location) {
    $scope.fullname;
    $scope.create = function() {
        // console.log($scope.email, $scope.password, $scope.firstname, $scope.lastname);
        $http.post('ajax/createaccount.php', {
            'email': $scope.email,
            'username': $scope.username,
            'password': $scope.password, 
            'firstname': $scope.firstname, 
            'lastname': $scope.lastname
        }).then(function(data) {
            console.log("Success");
            $scope.fullname = data.config.data.firstname + " " + data.config.data.lastname;
            console.log($scope.fullname);
            $location.path("/createsuccess");
        }, function() {
            console.log("Error");
        })
    }
    console.log($scope.fullname);
}]);

第一个console.log($scope.fullname)输出正确的数据。

第二个console.log($scope.fullname)输出'undefined'.

感谢所有花时间看这篇文章的人。

Answer 1

在您 $http.post 的 then 上尝试更新以下内容：

$scope.fullname = data.config.data.firstname + " " + data.config.data.lastname;

to（除非数据对象是明确的data.config.data.firstname / WS 不返回数据）：

$scope.fullname = data.firstname + " " + data.lastname;

如果这不能解决问题，请尝试 console.log(data); 查看来自服务器的 $http.post 方法的响应。

Answer 2

这是非常基础的。 AJAX 请求是异步执行的异步请求。因此，当您使用 $http 方法提交表单时（使用 AJAX 向服务器发送数据），成功回调将在服务器响应后执行。

所以你不能指望最后一个 console 语句在你提交表单后执行。

chatApp.controller('createController', ['$scope', '$http', '$location', function($scope, $http, $location) {

    console.log("1");
    $scope.fullname;

    $scope.create = function() {
        console.log("2");
        $http.post('ajax/createaccount.php', {
            'email': $scope.email // your data
        }).then(function(data) {
            console.log("3");
        }, function() {
            console.log("Error");
        })

        console.log("4");
    }

    console.log("5");
}]);

当您的 createController 实例化时，您将首先看到输出 1，然后是 5。当您使用 create() 方法提交表单时，您将看到输出 2 -> 4 几秒钟后 3.

编辑

要真正解决您评论的问题，您可以使用 $rootScope，但不建议使用 $rootScope。所以我建议您创建一个全局控制器并将其分配给您的 body 标签，例如

<body ng-controller="GlobalController">

并在那里定义一个对象：

chatApp.controller("GlobalController", ["$scope", function($scope) {

    $scope.globalData = {};
}]);

这将在整个应用程序中创建一个通用 Angular 范围，以便您可以保存通用和通用数据。每个子控制器（如本例中的 createController）将从该全局控制器继承数据。

现在，像这样修改您的 createController 代码：

chatApp.controller('createController', ['$scope', '$http', '$location', function ($scope, $http, $location) {

    $scope.create = function () {
        // console.log($scope.email, $scope.password, $scope.firstname, $scope.lastname);
        $http.post('ajax/createaccount.php', {
            'email': $scope.email,
            'username': $scope.username,
            'password': $scope.password,
            'firstname': $scope.firstname,
            'lastname': $scope.lastname
        }).then(function (data) {
            console.log("Success");
            $scope.globalData.fullname = data.config.data.firstname + " " + data.config.data.lastname;
            console.log($scope.fullname);
            $location.path("/createsuccess");
        }, function () {
            console.log("Error");
        })
    };

    console.log($scope.globalData.fullname);
}]);

或者，您可以创建一个 Angular service/factory 来保存公共数据。

从发送 http post 请求的 submit() 更改 $scope 变量

Change $scope variable from submit() that sends http post request

post

http

submit

angularjs