Question

我正在使用angular js，并且有一个get方法'$ scope.getAllEmployeesList'。在这种方法中，我将响应数据放入“ $ scope.employeeList”中。但是，list仅在方法内部包含数据，但在get方法外部却为空。

这是我的代码：

var app = angular.module('app', []);
app.controller('basicInfoController', function ($scope, $http, $location) {

$scope.submitForm = function () {

    var url = "http://localhost:8080/basicInfo/save";
    var data = {
        employeeId: $scope.employeeId,
        firstName: $scope.firstName,
        lastName: $scope.lastName,
        companyId: $scope.companyId,
        phoneNo: $scope.phoneNo,
        sexId: $scope.sexId,
        sexName: $scope.sexName,
        birthDate: $scope.birthDate,
        joiningDate: $scope.joiningDate,
        department: $scope.department
    };
    $http.post(url, data).then(function (response) {
        $scope.postResultMessage = "Sucessful!";
        $scope.successMessage = 'User created successfully';
    }, function (response) {
        $scope.postResultMessage = "Fail!";
    });
            $scope.employeeId = "";
            $scope.firstName = "";
            $scope.lastName = "";
            $scope.companyId = "";
            $scope.phoneNo = "";
            $scope.sexId = "";
            $scope.sexName = "";
            $scope.birthDate = "";
            $scope.joiningDate = "";
            $scope.department = "";
    }

    $scope.employeeList =[];
    $scope.getAllEmployeesList = function () {

        var url = $location.absUrl() + "basicInfo/getAllEmployeeBasicInfo";

        var config = {
            headers: {
                'Content-Type': 'application/json;charset=utf-8;'
            }
        }
        $http.get(url, config).then(function (response) {
            $scope.employeeList = response.data;
            $scope.employeeList = angular.copy(response.data);
            console.log($scope.employeeList);
        }, function (response) {
            $scope.getResultMessage = "Fail!";

        });
    }

    $scope.getAllEmployeesList();
    console.log($scope.employeeList);

    function reset() {

        $scope.basicInfo = {
            employeeId: '',
            firstName: '',
            lastName: '',
            phoneNo: '',
            sex: '',
            birthDate: '',
            companyId: '',
            department: '',
            joiningDate: ''

        };

        $scope.myForm.$setPristine(); //reset Form
    }
});

当我打印'console.log（$ scope.employeeList）;'时，在$ scope.getAllEmployeesList方法中

在方法内部，则显示值，但如果在方法的侧面打印，则显示空白列表。

Answer 1

只需返回$ http ...然后固定到另一个.then（）即可。

var app = angular.module('app', [])
.controller('basicInfoController', function ($scope, $http, $location) {

    function submitForm() {
        var url = "http://localhost:8080/basicInfo/save";
        var data = {
            employeeId: $scope.employeeId,
            firstName: $scope.firstName,
            lastName: $scope.lastName,
            companyId: $scope.companyId,
            phoneNo: $scope.phoneNo,
            sexId: $scope.sexId,
            sexName: $scope.sexName,
            birthDate: $scope.birthDate,
            joiningDate: $scope.joiningDate,
            department: $scope.department
        };

        $http.post(url, data).then(function() {
            $scope.postResultMessage = "Sucessful!";
            $scope.successMessage = 'User created successfully';
        }, function() {
            $scope.postResultMessage = "Fail!";
        });

        $scope.employeeId = "";
        $scope.firstName = "";
        $scope.lastName = "";
        $scope.companyId = "";
        $scope.phoneNo = "";
        $scope.sexId = "";
        $scope.sexName = "";
        $scope.birthDate = "";
        $scope.joiningDate = "";
        $scope.department = "";
    }

    $scope.employeeList = [];

    function getAllEmployeesList() {
        var url = $location.absUrl() + "basicInfo/getAllEmployeeBasicInfo";

        var config = {
            headers: {
                'Content-Type': 'application/json;charset=utf-8;'
            }
        }

        return $http.get(url, config).then(function() {
            $scope.employeeList = response.data;
            $scope.employeeList = angular.copy(response.data);
        }, function() {
            $scope.getResultMessage = "Fail!";
        });
    }

    getAllEmployeesList().then(function() {
        console.log($scope.employeeList);
    });

    function reset() {

        $scope.basicInfo = {
            employeeId: '',
            firstName: '',
            lastName: '',
            phoneNo: '',
            sex: '',
            birthDate: '',
            companyId: '',
            department: '',
            joiningDate: ''

        };

        $scope.myForm.$setPristine(); //reset Form
    }

    $scope.getAllEmployeesList = getAllEmployeesList;
    $scope.submitForm = submitForm;
});

为什么列表在Angular js的方法外变成空

1 个答案: