Wie kann ein Controller für zwei verschiedene Ansichten wiederverwendet werden?

Question

Ich habe einen Controller definiert, und wenden Sie es auf 2 Ansichten mit kleinen Unterschieden an.

Angular Code:

app.controller('MyCtrl', function($scope) { 
    $scope.canSave = false; 
    $scope.demo = { 
     files : [{ 
     filename: 'aaa.html', 
     source: '<div>aaa</div>' 
     }, { 
     filename: 'bbb.html', 
     source: '<div>bbb</div>' 
     }] 
    } 
    $scope.newFile = function(file) { 
     $scope.demo.files.push(file); 
    } 
    $scope.$watch("demo.files", function(val) { 
     $scope.canSave = true; 
    }, true); 
}); 

Ansicht 1:

<div ng-controller="MyCtrl"></div> 

Ansicht 2:

<div ng-controller="MyCtrl"></div> 

Das Codebeispiel ist sehr einfach, aber es gibt eine Menge Code und Logik in meinem echten Projekt.

Die Ansicht 1 und 2 haben fast die gleichen Funktionen, nur mit ein paar Unterschieden, aber ich muss etwas Code für jeden von ihnen in der Steuerung schreiben.

Ich möchte nicht 2 verschiedene Controller für sie erstellen, weil sie die meisten der gleichen Logik haben. Ich möchte die Logik nicht in einen Dienst verschieben, um ihn zwischen den beiden Controllern zu teilen, weil die Logik nicht so üblich ist, um ein Dienst zu sein.

Gibt es einen anderen Weg, es zu tun?

Answer 1

Unter den gegebenen Bedingungen kann ich etwas tun wie

function MyCommonCtrl(type){ 
    return function($scope, $http) { 
     $scope.x = 5; 

     if(type = 't1'){ 
      $scope.domore = function(){ 
      } 
     } 

     .... 
     .... 
    } 
} 

angular.module('ng').controller('Type1Ctrl', ['$scope', '$http', MyCommonCtrl('t1')]); 
angular.module('ng').controller('Type2Ctrl', ['$scope', '$http', MyCommonCtrl('t2')]); 

Dann

<div ng-controller="Type1Ctrl"></div> 

und

<div ng-controller="Type2Ctrl"></div> 

Answer 2

Ich weiß nicht, Ihr spezifisches Set-up, aber Ihre 2 Controller könnten von einem gemeinsamen Vorfahren erben.

Type1Ctrl.prototype = new MyCtrl(); 
Type1Ctrl.prototype.constructor = Type1Ctrl; 

function Type1Ctrl() { 
    // constructor stuff goes here 
} 

Type1Ctrl.prototype.setScope = function() { 
    // setScope 
}; 

Type2Ctrl.prototype = new MyCtrl(); 
Type2Ctrl.prototype.constructor = Type2Ctrl; 

function Type2Ctrl() { 
    // constructor stuff goes here 
} 

Type2Ctrl.prototype.setScope = function() { 
    // setScope 
}; 

Answer 3

Ich konfrontiert auch ähnliche Problem und Umfang Vererbung mein Problem gelöst. Ich wollte einen Controller "wiederverwenden", um gemeinsamen Zustand/Modell ($ Scope) und Funktionalität (Controller-Funktionen an $ Scope) zu vererben Wie in der "Scope Inheritance Example" beschrieben, schließe ich übergeordneten Controller an ein äußeres DOM-Element und Kind-Controller an die innere . Umfang und Funktionen des übergeordneten Controllers "fusionieren" nahtlos in den untergeordneten.

Answer 4

Hier ist eine weitere Option. Etwas von this blog post

app.factory('ParentCtrl',function(){ 
    $scope.parentVar = 'I am from the parent' 
    }; 
}); 

app.controller('ChildCtrl', function($scope, $injector, ParentCtrl) { 
    $injector.invoke(ParentCtrl, this, {$scope: $scope}); 
}); 

modifizierte

here is a plunker