javascript - 组合几乎相同的 Controller

Question

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

我已经研究过使用带有“path”属性的指令，但由于行会不同，所以我最终会得到两个单独的指令/模板。为了避免这种情况，我尝试嵌入构建表行的 ng-repeat，但事实证明，嵌入的元素仍然与外部范围相关，而不是指令(及其 Controller )的范围。

是否有适当的“Angular ”方法来做到这一点？

Answer 1

您可以在另一个 Controller 中重用基本 Controller ，并根据需要调整其值或在创建 Controller 之前准备范围。

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});
});

另一个选项是从与 Controller 关联的元素中读取值。

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>