Two different controllers that use the same service and get the same result.

Question

I created two common services for all of my core modules. One of them uses an 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 injected commonService into my controller as follows:

 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 use tabs for each module. So all my controllers will be on the same page. But all the tabs show the same data. Is it because both controllers use the same variable names? But the links to the controllers are different.

Answer 1

Is it because both controllers use the same variable names?

No. Each controller has its own scale, so you can create variables with the same name

But the links to the controllers are different.

The service is similar to singleton, and you make 2 calls:

• commonService.load(apiUrl + 'supportmembers/:id');
• commonService.load(apiUrl + 'roles/:id');

The first problem is the method: run

you redefine resourceUrl twice

 vm.load = function(url) { resourceUrl = url; // <-- here getResultsPage(1); } 

The second problem is that you save the results under the same variables in the service

  vm.listdata = response["data"]; vm.totalItems = response.total; vm.currentPage = pageNumber; 

One solution is to store data on the map under a unique key, in your case you can use your URL. Sort of:

 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 singletones and you enter a link to the same service. Try not to assign results to

 vm.listdata = response["data"]; vm.totalItems = response.total; vm.currentPage = pageNumber; 

But return it directly. Both methods save the results with the same od singleton properties. Thus, only the latest result is available. I think so:)