Question

这是我的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>

这是我的服务脚本

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);
        }

    }

});

这是我的控制器

 //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);
});

当页面加载并以服务然后控制器启动时出现错误。这就是为什么它试图首先加载员工然后它不等待onSuccess方法并且它跳转到控制器继续并最终返回服务以执行onSuccess方法，该方法执行得太晚，因为它返回对象，但在控制器中我已经得到了未定义的对象。我该如何解决这个问题？

Answer 1

异步问题。你可以将承诺链接起来。尝试：

在服务上确保你回复承诺：

var data = JSON.parse('[{"id":8,"name":"keren"},{"id":9,"name":"rose"}]');
var body = $('#body');

for(var i=0; i< data.length; i++){
  var dataItem = data[i];
  var conversationId = $('<div>' + dataItem.id + '</div>').data('conversation-id', dataItem.id);
  var conversationUser = $('<div>' + dataItem.name + '</div>').data('conversation-user-name', dataItem.name);
  var dataContainer = $('<div></div>').append(conversationId, conversationUser);
  $('#body').append(dataContainer);
}

在控制器中，您可以将其链接以获取所需的数据：

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);

}

如何使用angular加载对象onload

1 个答案: