Is there a way to fetch data from a function and store it in the scope using resolve in an AngularJS route?
For instance:
.state('list.employee_list', {
url: "/employee_list",
templateUrl: "views/list/employee_list.html",
data: { pageTitle: 'Employee list' },
resolve: {
"employeesCollection" : function(){
alert("LOAD");
$scope.myData = myFunction($scope);
alert("finished load, now load view");
}
}
})
The main concept here is to retrieve data for a table before rendering its view, ensuring that the table won't be empty. The data retrieval function communicates with Parse.com.
UPDATE:
config.js
.state('list.employee_list', {
url: "/employee_list",
templateUrl: "views/list/employee_list.html",
data: { pageTitle: 'Employee list' },
controller: employeeListCtrl,
resolve: {
employeesCollection : employeeListCtrl.loadData(companyID)
}
})
controllers.js
function employeeListCtrl($scope, employeesCollection){
$scope.employeesCollection = employeesCollection;
}
employeeListCtrl.loadData = function(companyID){
var employeesCollection = [];
var User = Parse.Object.extend("User");
var promise = new Parse.Promise();
var query = new Parse.Query(User);
query.equalTo("companyID", companyID);
query.find().then(function(results) {
for (var i = 0; i < results.length; i++) {
var estado = results[i].get("sendTest");
if(estado == "no"){
results[i].status = "{{ 'FREE' | translate }}";
}else if(estado == "yes"){
results[i].status = "{{ 'TEST_SENT' | translate }}";
}
console.log(results[i].get("lastName"));
employeesCollection[i] = results[i];
}
}).then(function(redirect) {
// All tasks completed!
//window.location.href = "#/list/employee_list";
promise.resolve();
console.log("LOADED");
return employeesCollection;
});
}
views/list/employee_list.html
<tr ng-repeat="row in employeesCollection">
<td>
{{row.get("firstName")}}
</td>
<td>
{{row.get("lastName")}}
</td>
<span class="label label-primary">{{status}}</span>
</td>
</tr>