Two different controllers using same service and getting same result - angularjs

Question

I have created two common services for my all master modules. One using ng-resource.
app.service('CRUDService',function($resource, $window){
var data = JSON.parse($window.localStorage["userInfo"]);
this.crudFunction = function (url) {
return $resource(url , {id:'#_id'},{
update: {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept' : 'application/json',
'Authorization' : 'Bearer '+data['accessToken']
}
},
save: {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept' : 'application/json',
'Authorization' : 'Bearer '+data['accessToken']
}
},
remove: {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept' : 'application/json',
'Authorization' : 'Bearer '+data['accessToken']
}
},
get :{
method: 'GET',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept' : 'application/json',
'Authorization' : 'Bearer '+data['accessToken']
}
}
});
}
});
And another service for common functions used by all controllers.
app.service('commonService', function (CRUDService) {
var vm = this;
var resourceUrl = apiUrl;
vm.totalItemsTemp = {};
vm.totalItems = 0;
vm.currentPage = 1;
vm.pageChanged = function(newPage) {
getResultsPage(newPage);
};
vm.load = function(url) {
resourceUrl = url;
getResultsPage(1);
}
function getResultsPage(pageNumber) {
CRUDService.crudFunction(resourceUrl).get({"page": pageNumber},function success(response) {
vm.listdata = response["data"];
vm.totalItems = response.total;
vm.currentPage = pageNumber;
},
function error(response) {
console.log(response);
});
}
vm.save = function() {
CRUDService.crudFunction(resourceUrl).save($.param(vm.newEntry),function(response) {
if(response["success"] == true)
{
vm.listdata.push(response["inserted_data"]);
getResultsPage(vm.currentPage);
$(".modal").modal('hide');
}
else
vm.msg = "Error Saving";
},function(response) {
vm.error = response['data'];
});
}
vm.create = function(){
vm.newEntry = {};
vm.editData = 0;
vm.error = {};
}
vm.edit = function(id,index) {
vm.newEntry = angular.copy(vm.listdata[index]);
vm.editData = 1;
vm.edit_index = index;
vm.error = {};
}
vm.update = function(id,index) {
vm.newEntry._method = "PUT";
CRUDService.crudFunction(resourceUrl).update({id : id} , $.param(vm.newEntry),function(response) {
if(response["success"] == true)
{
vm.listdata[index] = response["updated_data"];
$(".modal").modal('hide');
vm.newEntry = {};
}
else
vm.msg = "Error Updating";
},function(response) {
vm.error = response['data'];
});
}
vm.remove = function(id, index) {
var result = confirm("Are you sure you want to delete vm?");
if (result) {
CRUDService.crudFunction(resourceUrl).remove({id : id} , $.param({"_method" : "DELETE"}),function(response) {
getResultsPage(vm.currentPage);
},function(response) {
console.log(response);
});
}
}
});
And I am injecting commonService in my controller like this:
app.controller('UserRolesCtrl', function($scope, commonService) {
commonService.load(apiUrl + 'roles/:id');
$scope.userroles = commonService;
});
app.controller('SupportMembersCtrl', function($scope, commonService) {
commonService.load(apiUrl + 'supportmembers/:id');
$scope.supportmembers = commonService;
});
Now I am using tabs for each module. So that my all controllers will be in same page. But all the tabs showing same data. Is it because both controllers are using same variable names? But both the controller's references are different.

Answer 1

Is it because both controllers are using same variable names?
No. Each controller has his own scope so you can create variables with the same name
But both the controller's references are different.
The service is like singleton and you do 2 calls:
commonService.load(apiUrl + 'supportmembers/:id');
commonService.load(apiUrl + 'roles/:id');
The 1st problem is in method: run
you override resourceUrl twice
vm.load = function(url) {
resourceUrl = url; // <-- here
getResultsPage(1);
}
The 2nd problem - you store results under the same variables in service
vm.listdata = response["data"];
vm.totalItems = response.total;
vm.currentPage = pageNumber;
The one of solutions is to store data in map under unique key, in your case you can take your URL. Something like:
vm.load = function(url) {
//resourceUrl = url;
getResultsPage(1, url); // pass url as argument
}
function getResultsPage(pageNumber, url) {
CRUDService.crudFunction(url).get({"page": pageNumber},function success(response) {
// ...
},
function error(response) {
console.log(response);
});
}

Answer 2

Angularjs' services are singletons and you are injecting reference to the same service. Try to not assign results into
vm.listdata = response["data"];
vm.totalItems = response.total;
vm.currentPage = pageNumber;
But return it directly. Both methods saves results under the same properties od singleton. So only last result is available. I think so:)