如何以角度加载对象

Question

This is my html 这是我的HTML

<!DOCTYPE html>
<html x-ng-app="demo">
<head>
<title>Demo</title>
    <script src="../demo/js/angular.js"></script>
    <script src="../demo/js/jquery-3.1.0.js"></script>
    <script src="../demo/js/jquery-3.1.0.min.js"></script>
    <script src="../demo/js/bootstrap.js"></script>
    <script src="../demo/js/bootstrap.min.js"></script>
    <link href="../demo/css/bootstrap.css" rel="stylesheet">
    <script src="../demo/js/employee_service.js"></script>
    <script src="../demo/js/employee_controller.js"></script>   
</head>
<body>
    <form name="demo_form">
        <div x-ng-controller="EmployeeController">
            <h1> {{Employee.name}} </h1>
            <span> </span>
            <ul>
                <li x-ng-repeat="address in employee.addresses">
                 {{address.address1}}
                </li>
            </ul>
        </div>

    </form>
</body>
</html>

This is my service script 这是我的服务脚本

var module = angular.module('demo', []);
module.service('EmployeeService', function($http){

    this.get = function(id){
        var method = "GET";
        var url = "http://localhost:8080/rest/employee/get/" + id;
        console.log(url);

        $http({
            method : method,
            url : url,
            headers: {'Content-Type' : 'application/json'}
        }).then(onSuccess, onError);

        function onSuccess(response){
            console.log('got it');
            return response.data;
        }

        function onError(response){
            console.log(response.statusText);
        }

    }

});

This is my controller 这是我的控制器

 //module.controller('EmployeeController', function ($scope, $routeParams EmployeeService) { //This line give an error but it is not related to the question
module.controller('EmployeeController', function ($scope, EmployeeService) {

    //var paramEmployeeID = $routeParams.params1;
    var paramEmployeeID = 1;
    //Here it doesn't wait for the onSuccess method from the service which will deliver the object.
    $scope.employee = EmployeeService.get(paramEmployeeID);
    //$scope.employee = angular.copy(EmployeeService.get(paramEmployeeID));
    console.log($scope.employee);
});

The error comes when the page loads and starts with the service and then controller. 当页面加载并从服务然后是控制器启动时，将出现错误。 That's why it tries to load first the employee then it doesn't wait for the onSuccess method and it jumps to the controller to continue and finally comes back to the service to execute the onSuccess method which executes too late because it returns the object but in the controller I already got the undefined object. 这就是为什么它首先尝试加载员工，然后不等待onSuccess方法，然后跳转到控制器继续执行，最后返回服务以执行onSuccess方法的原因，该方法执行得太晚了，因为它返回了对象，但是控制器我已经得到了未定义的对象。 How can I solve this problem? 我怎么解决这个问题？

Answer 1

Async issue. 异步问题。 You can chain the promise. 您可以兑现承诺。 Try: 尝试：

On the service make sure you return the promise: 在服务上，请确保您返回了承诺：

this.get = function(id){
    var method = "GET";
    var url = "http://localhost:8080/rest/employee/get/" + id;
    console.log(url);

    function onSuccess(response){
        console.log('got it');
        return response.data;
    }

    return $http({
        method : method,
        url : url,
        headers: {'Content-Type' : 'application/json'}
    }).then(onSuccess, onError);

}

In the controller you can chain it to get the data that you need: 在控制器中，您可以将其链接以获取所需的数据：

EmployeeService.get(paramEmployeeID).then(function(employee){
   $scope.employee = employee;
   console.log($scope.employee);
});

如何以角度加载对象

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-09-09 02:30:32

如何以角度加载对象

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-09-09 02:30:32

解决方案1
0 已采纳 2016-09-09 02:30:32