2016-09-09 3 views
0

Dies zu laden ist mein htmlWie ein Objekt onload mit Winkel

<!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> 

Das ist mein Service-Skript ist

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

    } 

}); 

Dies ist mein 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); 
}); 

Der Fehler kommt, wenn die Seite lädt und startet mit dem Service und dann Controller. Deshalb versucht es zuerst den Mitarbeiter zu laden, dann wartet es nicht auf die Methode onSuccess und springt zum Controller, um fortzufahren und kommt schließlich zum Service zurück, um die Methode onSuccess auszuführen, die zu spät ausgeführt wird, weil sie das Objekt aber zurückgibt der Controller habe ich schon das undefinierte Objekt bekommen. Wie kann ich dieses Problem lösen?

+0

Wie Sie bekommen Wert in $ scope.newEmployee und von wo Sie die Funktion save() aufrufen? – MukulSharma

+0

$ scope.newEmployee wird von einer anderen Seite mit ng-model gebunden. Und auf dieser Seite gibt es eine Schaltfläche, die die Speichermethode aufruft. Ich habe meinen Controller mit der Speicherfunktion eingefügt, die für die Frage irrelevant ist. In der Tat war das Problem nur die Zeilen unterhalb der $ scope.save Methode. Ich habe meine Frage aktualisiert, um Missverständnisse zu vermeiden. –

+0

Welchen Browser benutzen Sie? Eigentlich habe ich ein Problem mit der Veröffentlichung von Daya von eckig nach API. Es funktioniert gut mit IE, aber in Chrom gibt es 'Preflight Fehler' .. können Sie helfen – MukulSharma

Antwort

0

Asynchrones Problem. Sie können das Versprechen verketten. Versuchen:

Auf dem Dienst sicherstellen, dass Sie das Versprechen zurück:

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 der Steuerung Sie verketten kann es die Daten zu erhalten, die Sie benötigen:

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

Danke für Ihre Antwort. Ich erhalte diesen Fehler: angular.js: 13920 TypeError: Kann die Eigenschaft 'then' von undefined nicht lesen –

+0

Mein Fehler, ich habe meine Antwort bearbeitet, um das Problem zu beheben. – gaheinrichs

Verwandte Themen