angularjs - 两个不同的 Controller 使用相同的服务并获得相同的结果

Question

我为我的所有主模块创建了两个通用服务。一个使用 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']
                }
            }
        });
    }
});

以及所有 Controller 使用的通用功能的另一项服务。

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);
            });
        }
    }
});

我在我的 Controller 中注入(inject) commonService，如下所示:

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;
});

现在我为每个模块使用标签。这样我的所有 Controller 都将在同一页面中。但所有选项卡都显示相同的数据。是因为两个 Controller 都使用相同的变量名吗？但是两个 Controller 的引用是不同的。

Answer 1

Is it because both controllers are using same variable names?

不，每个 Controller 都有自己的范围，因此您可以创建具有相同名称的变量

But both the controller's references are different.

该服务就像单例，您需要进行 2 次调用:

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

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

第一个问题在方法中:run

你覆盖 resourceUrl两次

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

第二个问题 - 您将结果存储在服务中的相同变量下

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

解决方案之一是将数据存储在唯一键下的 map 中，在您的情况下，您可以获取您的 URL。就像是:

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);
        });
}