【问题标题】:Combining common function in controllers AngularJS结合控制器AngularJS中的常用功能
【发布时间】:2015-04-18 18:30:43
【问题描述】:

我正在处理这个项目。我正在使用所有控制器之间通用的分页、checkAll、deleteAll 等功能。我希望将代码移至工厂或服务部门,以便可用于所有控制器。我试过但不清楚是否完美。我要提示。 我知道创建工厂或服务,以及如何集成它控制器但有点混淆移动类似代码的逻辑。

我给出了我在所有控制器中使用的示例,以及用于排序和分页的逻辑。

$scope.bigCurrentPage = 1;
$scope.editIndex = "";

var sortKey = "name";
var sortDirection = "ASC";
$scope.filterObj = {order: [sortKey + " " + sortDirection], limit: CONFIG.limit, offset: 0};
$scope.filterObj.offset = ($scope.bigCurrentPage - 1) * CONFIG.limit;

$scope.sortList = function (inputSort) {
    if (sortKey === inputSort) {
        sortDirection = (sortDirection === "ASC") ? "DESC" : "ASC";
    } else {
        sortKey = inputSort;
    }
    $scope.filterObj.order = [sortKey + " " + sortDirection];
    $scope.pageChanged();
}


$scope.getSongs = function () {
    $scope.filterObj.offset = ($scope.bigCurrentPage - 1) * CONFIG.limit;
    Song.find({filter: $scope.filterObj})
            .$promise
            .then(function (data) {
                $scope.items = data;
                $scope.maxSize = 5;
                $scope.size = $scope.filterObj.limit;
                $scope.countingIndex = ($scope.bigCurrentPage - 1) * $scope.filterObj.limit; //Its idea to implement counting. Variable is not part of pagination..////     
            });
};


$scope.pageChanged = function () {
    $scope.getSongs();
};

$scope.pageChanged();

这样,假设我正在为专辑执行此操作,我会将 sortKey 更改为“id”,将使用带有“Album.find”的服务,将更改“过滤器”对象,我完成了,但事实是我正在使用所有控制器中的通用代码。如何写得更好。

【问题讨论】:

  • 既然你使用了一堆 $scope 那么服务就不合适了。让自己成为一个基本控制器类并从它继承。

标签: javascript angularjs angularjs-scope angularjs-controller code-reuse


【解决方案1】:

您确实有很多在服务中很难维护的属性,所以我建议您应该使用控制器而不是服务,(或者将可重用的变量放入服务中,这样代码更有意义)。下面创建的控制器可以使用 $controller 依赖在任何其他控制器中注入。

通用控制器

app.controller('commonCtrl', function($scope) {
    $scope.bigCurrentPage = 1;
    $scope.editIndex = "";

    var sortKey = "name";
    var sortDirection = "ASC";
    $scope.filterObj = {
        order: [sortKey + " " + sortDirection],
        limit: CONFIG.limit,
        offset: 0
    };
    $scope.filterObj.offset = ($scope.bigCurrentPage - 1) * CONFIG.limit;

    $scope.sortList = function(inputSort) {
        if (sortKey === inputSort) {
            sortDirection = (sortDirection === "ASC") ? "DESC" : "ASC";
        } else {
            sortKey = inputSort;
        }
        $scope.filterObj.order = [sortKey + " " + sortDirection];
        $scope.pageChanged();
    }

    $scope.getSongs = function() {
        $scope.filterObj.offset = ($scope.bigCurrentPage - 1) * CONFIG.limit;
        Song.find({
                filter: $scope.filterObj
            })
            .$promise
            .then(function(data) {
                $scope.items = data;
                $scope.maxSize = 5;
                $scope.size = $scope.filterObj.limit;
                $scope.countingIndex = ($scope.bigCurrentPage - 1) * $scope.filterObj.limit; //Its idea to implement counting. Variable is not part of pagination..////     
            });
    };

    $scope.pageChanged = function() {
        $scope.getSongs();
    };

    $scope.pageChanged();
});

您可以使用 $controller 依赖项将创建的 commonCtrl 注入到任何其他控制器,commonCtrl 将其范围共享给注入它的控制器。但是从controllerAcommonCtrl 所做的更改在controllerB 中不可用,因为commonCtrl 将其范围的副本提供给注入它的控制器。

控制器 A

app.controller('controllerA', function($scope, $controller){
   $controller('commonCtrl', {$scope: $scope}); //inject commonCtrl scope to current scope
   //common scope will be available from here
}) 

注意

如果您希望更改反映在其他控制器中,您可以使用 与此控制器共享公共属性的服务 不同的控制器。

【讨论】:

  • 你能用ControllerA中的位例子解释一下吗?这会更容易。我如何将依赖项从控制器 A 传递给 commonCtrl。因为我在不同的服务集上使用相同的。如果我使用与 ControllerA 和 ControllerB 位于同一页面上的控制器,还有一个问题会起作用
  • 控制器 A 和 B 会分别工作吗?
  • 不,它只会将commonCtrl 复制到controllerA commonCtrlcontrollerA 的更改将在controllerB 中不可用,我将添加更多信息...你想要从controllerA 所做的更改应该在controllerB 中可用
  • 不,我认为从 ControllerA 的更改反映在 ControllerB 中的工厂可以实现这一点。我说的对吗?
  • @Sankalp 是的,你是对的,请看我更新的答案
猜你喜欢
  • 2015-08-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-08
  • 2019-04-01
  • 1970-01-01
  • 2023-03-07
  • 1970-01-01
相关资源
最近更新 更多