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

发布时间：2020-12-17 18:06:35 所属栏目：安全来源：网络整理

导读：我为我的所有主模块创建了两个常用服务.一个使用ng-resource. app.service('CRUDService',function($resource,$window){ var data = JSON.parse($window.localStorage["userInfo"]); this.crudFunction = function (url) { return $resource(url,{id:'@_id'}

我为我的所有主模块创建了两个常用服务.一个使用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',remove: {
                method: 'POST',get :{
                method: 'GET','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',commonService) {
    commonService.load(apiUrl + 'supportmembers/:id');
    $scope.supportmembers = commonService;
});

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

解决方法

Is it because both controllers are using same variable names?

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

But both the controller’s references are different.

该服务就像单身,你做2个电话：

> commonService.load(apiUrl’supportmembers /：id’);
> commonService.load(apiUrl’colces /：id’);

第一个问题在于方法：运行

你重写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);
        });
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!