Kombinieren fast identischer Controller

Question

In meiner eckigen Anwendung habe ich zwei Tabellen, jede mit ihren eigenen Controllern. Diese beiden Tabellen verwenden ng-repeat, um Informationen darzustellen, die von einer REST-API abgerufen wurden. Die Controller für diese beiden Tabellen interagieren auf dieselbe Weise mit der API über denselben Service und stellen einfach einen anderen Pfad bereit.
Die meisten meiner Logik wurde in Services abstrahiert, aber es fühlt sich immer noch albern an, den gesamten Code, der zwischen den beiden Controllern übrig ist, zu duplizieren, wobei nur ein Wert geändert wird. Ich denke wahrscheinlich über den falschen Weg nach, aber ich finde keinen sauberen Weg, einen Controller mit Parametern zu "konstruieren".

Ich habe untersucht, mit einer Direktive mit einem "Pfad" -Attribut, aber da die Zeilen unterschiedlich sind, würde ich nur mit zwei separaten Direktiven/Templates enden. Um dies zu vermeiden, habe ich versucht, den ng-repeat zu übersetzen, der die Tabellenzeilen erzeugt, aber es stellt sich heraus, dass die übergelagerten Elemente immer noch mit dem äußeren Bereich verbunden sind, nicht mit dem der Direktive (und dem Controller).

Gibt es einen richtigen "eckigen" Weg, dies zu tun?

Answer 1

Sie können den Basis Controller in einem anderen wiederverwenden und seine Werte nach Bedarf anpassen oder den Bereich vor dem Erstellen des Controllers vorbereiten.

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

Eine weitere Option ist das Lesen der Werte aus dem Element, mit dem der Controller verknüpft ist.

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>