Schwierigkeiten beim Aufrufen der Funktion in angular js

Question

Ich habe eine Funktion an Angular App-Modul durch "app.factory", die bestimmte http-Anforderungen in es hat. Diese Funktion wird im Controller aufgerufen, und die zurückgegebenen Daten von der Funktion werden einer Bereichsvariable im Controller zugewiesen.

Das Problem besteht darin, dass der Controller zuerst ausgeführt wird und dann die HTTP-Anfragen in der Funktion ausgeführt werden, aufgrund derer die Daten, die von der HTTP-Anfrage kommen, nicht in der Scope-Variablen erfasst werden können. Wie kann das korrigiert werden?

function resourceapp.factory('dataService', function($http){ 
    var data = {}; 
    data.EnterprisePrograms = []; 
    data.Resources=[]; 
    data.Skills=[]; 
    data.Allocations=[]; 

    Execution = function($http) { 
    $http.get('http://localhost:8080/api/enterpriseProgram') 
     .then(function(resources) { 
     data.EnterprisePrograms=resources.data; 
     }); 

    $http.get('http://localhost:8080/api/resource') 
     .then(function(resources) { 
     data.Resources=resources.data; 
     }); 

    $http.get('http://localhost:8080/api/skill') 
     .then(function(resources) { 
     data.Skills=resources.data; 
     }); 

    $http.get('http://localhost:8080/api/allocation') 
     .then(function(allocation) { 
     data.Allocations = allocation.data; 
     }); 
    } 

    return data; 
}); 

Controller

resourceapp.controller('AllocationList', function($scope, dataService) { 
    $scope.allocationList = dataService.Allocations; 
}); 

Answer 1

Es sollte wie sein:

In Werk: Erstellen Sie eine Methode Versprechen zurückzukehren.

resourceapp.factory('dataService', function($http){ 
    var data = {}; 

    data.getEnterprisePrograms = function($http){ 
     return $http.get('http://localhost:8080/api/enterpriseProgram'); 
     } 

    data.getResourceData = function($http) { 
     return $http.get('http://localhost:8080/api/resource'); 
     } 

    data.getSkillData = function($http) { 
     return $http.get('http://localhost:8080/api/skill'); 
     } 

    data.getAllocationData = function($http) { 
     return $http.get('http://localhost:8080/api/allocation'); 
    } 

    return data; 
}); 

Kontroller, rufen Sie die Factory-Methode Versprechen zu holen und lösen sie mit $q.all()

resourceapp.controller('AllocationList', function($scope, dataService, $q){ 
       var allocationPromise = dataService.getAllocationData(); 
       var skillPromise= dataService.getSkillData(); 
       // other promise 

$q.all([allocationPromise,skillPromise, ..other promise]).then(function (result) { 
       $scope.allocationData = result[0].data; 
      $scope.skillData = result[1].data; 
       // other data 
      }) 
}); 

Siehe this für $q.all()

Answer 2

Sie auch eine Funktion für jede $ http schaffen könnte. nutzen Sie Versprechen.

EnterprisePrograms = function(){ 
    return $http.get('http://localhost:8080/api/enterpriseProgram') 
     .then(function(resources){ 
      return resources.data; 
     }); 
} 
Resources = function(){ 
    return $http.get('http://localhost:8080/api/resource') 
    .then(function(resources){ 
     return resources.data; 
    }); 
} 
Skills = function(){ 
    return $http.get('http://localhost:8080/api/skill') 
    .then(function(resources){ 
     return resources.data; 
    }); 
} 
Allocations = function(){ 
    return $http.get('http://localhost:8080/api/allocation') 
    .then(function(allocation){ 
     return allocation.data; 
    }); 
}