AngularJS - Moving Function To Service
Question
I have a function in my Controller which i am trying to re-write as a service.
The function reads in a length of values passed in from the HTML (from 1 - 12). If there are less than 12 values passed in, the function calculates how many less and displays the remaining number as empty cells.
HTML:
<div ng-app="">
<div ng-controller="EventController">
<table>
<tr ng-repeat="country in Countries">
<th>{{country.countryName}}</th>
<td ng-repeat="countryDetails in country.Details.slice(0, 12)">{{ countryDetails }}m</td>
<td ng-repeat="emptyCell in getEmptyCells(country.Details.length)" class="empty">empty</td>
</tr>
</table>
<br>
<table>
<tr ng-repeat="country in Countries">
<th>{{country.countryName}}</th>
<td ng-repeat="countryDetails in country.Details.slice(12, 24)">{{ countryDetails }}m</td>
<td ng-repeat="emptyCell in getEmptyCells(country.Details.length)" class="empty">empty</td>
</tr>
</table>
<br>
<table>
<tr ng-repeat="country in Countries">
<th>{{country.countryName}}</th>
<td ng-repeat="countryDetails in country.Details.slice(24, 36)">{{ countryDetails }}m</td>
<td ng-repeat="emptyCell in getEmptyCells(country.Details.length)" class="empty">empty</td>
</tr>
</table>
</div>
</div>
My JS Function:
$scope.getEmptyCells = function (len) {
var emptyCells = [];
for (var i = 0; i < 12 - len; i++) {
emptyCells.push(i);
}
return emptyCells;
}
My New Service:
app.factory('EmptyCellsService', function() {
return {
getEmptyCells: function(len) {
var emptyCells = [];
for(var i = 0; i < 12 - len; i++){
emptyCells.push(i);
}
return emptyCells;
}
};
});
And my call to the new service from the controller:
$scope.getEmptyCells = EmptyCellsService.getEmptyCells();
However the empty cells are no longer displaying.
Here is my working fiddle (when using a function (service code commented out): http://jsfiddle.net/oampz/GkarV/367/
La solution
See this updated fiddle.
You should have used
$scope.getEmptyCells = EmptyCellsService.getEmptyCells;
instead of
$scope.getEmptyCells = EmptyCellsService.getEmptyCells();
Autres conseils
I have made some changes to you code
- Given ng-app a value (
<div ng-app="app">
) - Created the module 'app' with service - EmptyCellsService (actually this is a factory not a service)
angular.module("app",[]).factory('EmptyCellsService',
function() {
return {
getEmptyCells: function(len) {
var emptyCells = [];
for(var i = 0; i < 12 - len; i++){
emptyCells.push(i);
}
return emptyCells;
}
};
});
3.Changed the EventController as below
function EventController($scope,EmptyCellsService) {
$scope.Countries = [{
countryName: "USA",
Details: [1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.0, 11.0, 12.0,
13.0, 14.0, 15.0, 16.0, 17.0, 18.0, 19.0, 20.0, 21, 22, 23, 24,
23.0, 24.0, 25.0, 26.0, 27.0, 28.0, 29.0, 30.0, 31, 32, 33, 34]
}, {
countryName: "UK",
Details: [3.3, 4.4, 5.5, 6.6]
}, {
countryName: "Russia",
Details: [7.7, 8.8, 9.9, 10.0]
}];
$scope.getEmptyCells = EmptyCellsService.getEmptyCells;
}
First, you are assigning the return value from the function call, that is not what you want, you could just save a reference to the function.
$scope.getEmptyCells = EmptyCellsService.getEmptyCells
Second, your controller function doesn't know anything about EmptyCellsService, since you're not injecting the dependency. You could just pass an argument to the constructor:
function EventController($scope, EmptyCellsService) { ...
And last but not least, on the provided fiddle, you're calling app.factory
even that app
is not defined anywhere... you should create the module first:
var app = angular.module('app',[]);
app.factory(...
And bind your html to that module:
<html ng-app="app"
Working fiddle:
http://jsfiddle.net/GkarV/370/