javascript - 如何在 Controller 之间共享通用逻辑？

Question

我有两个页面和两个 Controller ，它们对同一数据集执行搜索。一个有一个简单的表格来指定搜索条件。另一个允许用户在 map 上选择数据(通过选择区域或点击 map 上的要素)。

然后搜索结果显示在搜索控件下方的数据表中(在同一页面上)。

因此， Controller 具有不同的搜索功能，但也有许多共同的行为，即显示网格、分页、重新加载、批量编辑来自网格的数据等。

因此，两个 Controller 中有几个重复的功能，有时略有不同，有时完全相同。

显示数据的页面部分也是一个共享模板，包含在两个搜索页面上的 ng-include 中。

这是一个例子:

$scope.selectAllRows = function(){

    var selectedItems = $scope.searchState.selectedItems;

    angular.forEach($scope.searchState.searchResult.rows, function(row){
        // add only if not already selected
        if(selectedItems.indexOf(row) < 0){
            selectedItems.push(row);
        }
    });

};

此函数选择表中的所有行。它绑定(bind)到页面上按钮的 ng-click。

还有许多其他类似的函数，基本上从 $scope 中读取一些状态，执行一些逻辑，然后将新内容放回 $scope。

我想删除这些函数的重复，并在单个代码单元中重新组合常见行为。

注意:我想在这里分享的是行为，而不是数据。这些函数将执行相同的逻辑，但作用域不同。

因为这些实际上是演示/用户界面的东西，需要放在 $scope 上，我不认为可以使用服务，因为 $scope是一个严格控制的东西，不能注入(inject)到服务中。

我正在尝试在不同的文件中定义一个独立的函数，并从两个 Controller 调用这个函数:

myapp.defineCommonControllerBehaviour = function($scope, someOtherService){
    $scope.selectAlRows = function(){....}

    $scope.someOtherCommonTask = function(){
         someOtherService.doTheTask();
    }

    //etc...
};

//controller 1
myapp.defineCommonBehaviour($scope, someOtherService);

//controller 2
myapp.defineCommonBehaviour($scope, someOtherService);

它可以工作但不是很优雅，因为它在全局范围内定义了一个函数，在任何 Angular 模块之外。

是否有实现此目的的原生方式？或者至少更符合 Angular 架构？

Answer 1

我发现一些模式对我的用例很有用。

或者neutral JS code可用于定义和继承您的 Controller (缺乏依赖管理和原型(prototype)继承并不能使其成为最佳选择，但 ES2015 类在这种情况下有很大帮助)。

或者可以利用 Angular 依赖管理和 store common methods and properties in a service :

myApp.service('baseCtrl', function () {
  this.name = 'base';
  this.getName = function() {
    return this.name;
  };
});

myApp.controller('MainController', ['baseCtrl', function (baseCtrl) {
  angular.extend(this, baseCtrl);
  this.name = 'main';
}]);

有第三方解决方案如Classy为 Controller 提供固执己见的继承语法。

$injector 或 $controller 也可用于访问父 Controller 并继承它，但是由于引入了 controllerAs 语法，没有必要再乱搞 $scope 了。