Javascript 范围变量在REST API POST请求中丢失值

游戏创建控制器

createGame

函数由

ngClick

通过HTML文件调用。当函数到达

控制台.log

时，

$scope.gameData

中的值是正确的但是，当通过Laravel 5 REST API发送请求时，请求中没有任何内容。为了澄清，我说的是导致问题的这一行：

APIService.postData（'game'，'$scope.gameData）。然后（函数（数据）{

请求返回成功，因为名称不是必需的，ID是在数据回调中创建并发送回来的

我还完成了其他3个完整主题（游戏是完整主题），其中创建逻辑工作正常。此创建函数中的逻辑与其他函数中的逻辑没有什么不同，但由于某些原因，

name

值没有通过REST API发送

请让我知道，如果你需要更多的代码或有任何问题

游戏创建控制器

'use strict';

function GameCreateController($scope, APIService, $state) {

    $scope.race_counter = 0;
    $scope.class_counter = 0;

    $scope.gameData = [];
    $scope.gameData.name = '';
    $scope.gameData.classes = [{id: $scope.class_counter}];
    $scope.gameData.races = [{id: $scope.race_counter}];

    this.createGame = function() {

        $scope.loading = true;
        var newGameID = '';

        // --- Has value for $scope.gameData.name, but when the request is sent, there is nothing in the request at all.
        console.log($scope.gameData);

        APIService.postData('game', '', $scope.gameData).then(function (data) {
            newGameID = data.id;

            angular.forEach($scope.gameData.classes, function (key, value) {
                if (typeof $scope.gameData.classes[value].name != 'undefined' &&
                    typeof $scope.gameData.classes[value].icon != 'undefined') {
                    $scope.gameData.classes[value].game_id = newGameID;
                    APIService.postData('game-class', '', $scope.gameData.classes[value]);
                }
            });

            angular.forEach($scope.gameData.races, function (key, value) {
                if (typeof $scope.gameData.races[value].name != 'undefined' &&
                    typeof $scope.gameData.races[value].icon != 'undefined') {
                    $scope.gameData.races[value].game_id = newGameID;
                    APIService.postData('game-race', '', $scope.gameData.races[value]);
                }
            });

            $scope.loading = false;
            $state.go('app.games', {successMessage: 'Game has been created.'});
        })
    };

    this.addClassRow = function() {
        $scope.class_counter++;
        $scope.gameData.classes.push({id: $scope.class_counter});
    };

    this.deleteClassRow = function(rowNo) {
        $scope.class_counter--;
        $scope.gameData.classes.splice(rowNo, 1);
    };

    this.addRaceRow = function() {
        $scope.race_counter++;
        $scope.gameData.races.push({id: $scope.race_counter});
    };

    this.deleteRaceRow = function(rowNo) {
        $scope.race_counter--;
        $scope.gameData.races.splice(rowNo, 1);
    };

    this.cancelGame = function() {
        $state.go('app.games');
    };
}

App.controller('GameCreateController', GameCreateController);

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Models\Game;
use Exception;
use Input;

class GameController extends Controller
{
    public function index()
    {
        return Game::with('classes', 'races')->get();
    }

    public function store(Request $request)
    {
        return Game::create($request->all());
    }

    public function show($id)
    {
        $game = Game::with('classes', 'races')->where('id', '=', $id)->get();
        return response()->json($game[0], 200);
    }

    public function update(Request $request, $id)
    {
        try {
            $game = Game::find($id);
            $game->name = $request->name;
            $game->save();
            return response()->json($game, 200);
        } catch (Exception $e) {
            return response()->json(array(
                'status' => 'error',
                'message' => 'Error updating record: ' . $e->getMessage()
            ), 500);
        }
    }
}

API服务

'use strict';

function APIService($q, $http, sanitizeFormInputService, BASE_URL_BACKEND, API) {

    return {
        getData: function (route, param) {
            var defer = $q.defer();
            $http.get(BASE_URL_BACKEND + API + route + '/' + param).success(function (data) {
                    defer.resolve(data);
                }
            ).error(function (data) {
                    defer.reject(data);
                }
            );
            return defer.promise;
        },

        postData: function (route, param, postData) {

            var defer = $q.defer();
            var request = '';

            if (route == 'upload') {
                request = $http({
                    method: 'post',
                    url: BASE_URL_BACKEND + API + route + '/' + param,
                    data: postData,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                });
            } else {
                request = $http({
                    method: 'post',
                    url: BASE_URL_BACKEND + API + route + '/' + param,
                    transformRequest: sanitizeFormInputService,
                    data: angular.toJson(postData)
                });
            }

            request.success(function (data) {
                defer.resolve(data);
            });

            request.error(function (data) {
                defer.reject(data);
            });

            return defer.promise;
        },

        putData: function (route, param, putData) {

            var defer = $q.defer();
            var request = '';

            if (route == 'upload') {
                request = $http({
                    method: 'put',
                    url: BASE_URL_BACKEND + API + route + '/' + param,
                    data: putData,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                });
            } else {
                request = $http({
                    method: 'put',
                    url: BASE_URL_BACKEND + API + route + '/' + param,
                    transformRequest: sanitizeFormInputService,
                    data: angular.toJson(putData)
                });
            }

            request.success(function (data) {
                defer.resolve(data);
            });

            request.error(function (data) {
                defer.reject(data);
            });

            return defer.promise;
        },

        deleteData: function (route, param) {
            var defer = $q.defer();
            $http.delete(BASE_URL_BACKEND + API + route + '/' + param).success(function (data) {
                    defer.resolve(data);
                }
            ).error(function (data) {
                    defer.reject(data);
                }
            );
            return defer.promise;
        }
    };
}

App.factory('APIService', APIService);

游戏Laravel 5控制器

'use strict';

function GameCreateController($scope, APIService, $state) {

    $scope.race_counter = 0;
    $scope.class_counter = 0;

    $scope.gameData = [];
    $scope.gameData.name = '';
    $scope.gameData.classes = [{id: $scope.class_counter}];
    $scope.gameData.races = [{id: $scope.race_counter}];

    this.createGame = function() {

        $scope.loading = true;
        var newGameID = '';

        // --- Has value for $scope.gameData.name, but when the request is sent, there is nothing in the request at all.
        console.log($scope.gameData);

        APIService.postData('game', '', $scope.gameData).then(function (data) {
            newGameID = data.id;

            angular.forEach($scope.gameData.classes, function (key, value) {
                if (typeof $scope.gameData.classes[value].name != 'undefined' &&
                    typeof $scope.gameData.classes[value].icon != 'undefined') {
                    $scope.gameData.classes[value].game_id = newGameID;
                    APIService.postData('game-class', '', $scope.gameData.classes[value]);
                }
            });

            angular.forEach($scope.gameData.races, function (key, value) {
                if (typeof $scope.gameData.races[value].name != 'undefined' &&
                    typeof $scope.gameData.races[value].icon != 'undefined') {
                    $scope.gameData.races[value].game_id = newGameID;
                    APIService.postData('game-race', '', $scope.gameData.races[value]);
                }
            });

            $scope.loading = false;
            $state.go('app.games', {successMessage: 'Game has been created.'});
        })
    };

    this.addClassRow = function() {
        $scope.class_counter++;
        $scope.gameData.classes.push({id: $scope.class_counter});
    };

    this.deleteClassRow = function(rowNo) {
        $scope.class_counter--;
        $scope.gameData.classes.splice(rowNo, 1);
    };

    this.addRaceRow = function() {
        $scope.race_counter++;
        $scope.gameData.races.push({id: $scope.race_counter});
    };

    this.deleteRaceRow = function(rowNo) {
        $scope.race_counter--;
        $scope.gameData.races.splice(rowNo, 1);
    };

    this.cancelGame = function() {
        $state.go('app.games');
    };
}

App.controller('GameCreateController', GameCreateController);

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Models\Game;
use Exception;
use Input;

class GameController extends Controller
{
    public function index()
    {
        return Game::with('classes', 'races')->get();
    }

    public function store(Request $request)
    {
        return Game::create($request->all());
    }

    public function show($id)
    {
        $game = Game::with('classes', 'races')->where('id', '=', $id)->get();
        return response()->json($game[0], 200);
    }

    public function update(Request $request, $id)
    {
        try {
            $game = Game::find($id);
            $game->name = $request->name;
            $game->save();
            return response()->json($game, 200);
        } catch (Exception $e) {
            return response()->json(array(
                'status' => 'error',
                'message' => 'Error updating record: ' . $e->getMessage()
            ), 500);
        }
    }
}

---

您的问题在于如何组合数据，以及如何将数据传递给POST方法

$scope.gameData = [];
$scope.gameData.name = '';

您的数据初始化为数组，然后将属性作为对象附加到它上（是的，数组在JS中是一个对象，它可以工作！）。但是，当您传递这样一个数组时，
angular.toJson（）
方法实际上不能很好地工作。它返回一个空数组：
[]

data: angular.toJson(postData); // results in []

解决方案：

$scope.gameData = {};

我知道我错过了一些简单的东西。有趣的是，在其他主题中，它是一个对象，而不是一个数组。我在深夜编码得到了什么！谢谢你的帮助！