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

所有控制器使用的常用功能的另一项服务。

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

我正在我的控制器中注入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;
});

现在我正在为每个模块使用制表符。这样我的所有控制器都会在同一页面上。但所有标签显示相同的数据。是因为两个控制器都使用相同的变量名称吗？但是控制器的参考都是不同的。

Answer 1

是因为两个控制器都使用相同的变量名吗？

没有。每个控制器都有自己的范围，因此您可以创建具有相同名称的变量

但是控制器的引用都不同。

该服务就像 singleton ，您可以进行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;

解决方案之一是将数据存储在唯一键下的地图中，在您的情况下，您可以获取您的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);
        });
}

Answer 2

Angularjs＆＃39;服务是单身，您正在注入相同的服务。尽量不将结果分配到

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

但直接归还。两种方法都在单一的相同属性下保存结果。所以只有最后的结果可用。我想是这样:)）

两个不同的控制器使用相同的服务并获得相同的结

2 个答案: