组合几乎相同的控制器

Question

在我的 angular 应用程序中，我有两个 table，每个都有自己的控制器。这两个 table 使用 ng-repeat 来呈现从 REST API 检索到的信息。这两个 table 的控制器通过相同的服务以相同的方式与 API 交互，只是提供不同的路径。
我的大部分逻辑都已抽象为服务，但复制两个控制器之间剩余的所有代码、仅更改一个值仍然感觉很愚蠢。我可能以错误的方式思考这个问题，但我似乎无法找到一种干净的方法来 'construct' 带参数的控制器。

我研究过使用带有 'path' 属性的指令，但由于行会不同，我最终会得到两个单独的 directives/templates。为了避免这种情况，我尝试包含构建 table 行的 ng-repeat，但事实证明，被包含的元素仍然绑定到外部范围，而不是指令（及其控制器）的范围。

是否有合适的 "angular" 方法来做到这一点？

Answer 1

您可以在另一个控制器中重用 base 控制器并根据需要调整其值，或者在创建控制器之前准备范围。

angular.module('example')
.controller('BaseController', function($scope, MyService) {
  var receiveData = function(data) { /* ... */ };
  MyService.fetchData($scope.customUrl || '/default/url').then(receiveData);
  // the rest of the controller's code
});
.controller('AnotherController', function($scope, $controller) {
  $scope.customUrl = '/custom/url';
  var controller = $controller('BaseController', {$scope: $scope});
});

另一种选择是从与控制器关联的元素中读取值。

angular.module('example', [])
  .controller('MyController', function($scope, $attrs) {
    var url = $attrs.url || '/default/url';
    $scope.url = url;
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="example">
  <div ng-controller="MyController" url="/custom/url">
    The controller's URL is <code>{{ url }}</code>.
  </div>
</div>

组合几乎相同的控制器

Combining Nearly Identical Controllers

javascript

angularjs

angularjs-controller