在我的应用程序中,我有两个几乎相同的控制很多功能都是一样的,所以我想把它们原型化.这是控制器#1：

c2gcontroller.js

angular.module('c2gyoApp')
  .controller('C2gCtrl',function($scope) {
    // some unique stuff
    $scope.Feeday = 59;
    ...
    // the identical functions
    $scope.getMinutes = function(minutes) {
      var duration = moment.duration(minutes,'m');
      return duration.minutes();
    };
    ...
  });

和控制器#2：

c2gbcontroller.js

angular.module('c2gyoApp')
  .controller('C2gbCtrl',function($scope) {
    // some unique stuff
    $scope.Feeday = 89;
    ...
    // the identical functions
    $scope.getMinutes = function(minutes) {
      var duration = moment.duration(minutes,'m');
      return duration.minutes();
    };
    ...
  });

我已经尝试将$scope.getMinutes放入工厂：

smfactory.js

angular.module('c2gyoApp')
  .factory('smfactory',function() {
    return {
      getHours: function(minutes) {
        var duration = moment.duration(minutes,'m');
        return Math.ceil(duration.asHours() % 24);
      }
    };
  });

我已经将smfactory注入c2gcontroller.js

c2gcontroller.js(尝试#1)

angular.module('c2gyoApp')
  .controller('C2gCtrl',function($scope,smfactory) {
    ...
    // the identical functions
    $scope.getHours = smfactory.getHours(minutes);
    ...
  });

这会产生一个错误,即未定义分钟

line 33  col 42  'minutes' is not defined.

所以我尝试过：

c2gcontroller.js(尝试#2)

angular.module('c2gyoApp')
  .controller('C2gCtrl',smfactory) {
    ...
    // the identical functions
    $scope.getMinutes = function(minutes) {
      return smfactory.getHours(minutes);
    };
    ...
  });

这不会产生错误,但我的应用程序确实没有响应.基本上$scope.getMinutes现在不返回任何内容.

我已经阅读并观看了很多关于AngularJS服务,工厂,供应商的信息,但我不知道从哪里开始.原型c2gcontroller.js和c2gbcontroller.js的正确方法是什么？

如何使用 angular.extend进行伪继承

/* define a "base" controller with shared functionality */
.controller('baseCtrl',['$scope',.. 
    function($scope,...) {

  $scope.getMinutes = function(minutes) {
    var duration = moment.duration(minutes,'m');
    return duration.minutes();
  };


.controller('C2gCtrl',['$controller','$scope',...
    function($controller,$scope,...) {

  // copies the functionality from baseCtrl to this controller
  angular.extend(this,$controller('baseCtrl',{$scope: $scope}));

  // some unique stuff
  $scope.Feeday = 59;

})

.controller('C2gbCtrl',{$scope: $scope}))

  // some unique stuff
  $scope.Feeday = 89;
})

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