Wie löse ich einen inneren Controller auf und weise ihn dem äußeren Bereich zu?

Question

Selbsterklärend Geige: http://jsfiddle.net/5FG2n/1/

sagen, dass ich eine Ansicht mit zwei Controllern haben, das eine das andere enthält. Der äußere Controller ist statisch, aber ich muss den inneren Controller basierend auf einer Bereichsvariablen aus dem Äußeren setzen. Die Bereichsvariable ist der Name des inneren Controllers als String (zB 'InnerCtrl').

Hier ist die Ansicht:

<div ng-app='app' ng-controller='OuterCtrl'> 
    <div ng-controller='dynamicCtrl'> 
     {{result}} 
    </div> 
</div> 

Und hier ist das Modul, das noch nicht korrekt ist:

angular.module('app', []) 

    .controller('OuterCtrl', ['$scope', 
     function($scope) { 

      // Instead of hard coding the controller here, 
      // how do I resolve the string 'InnerCtrl' to the 
      // controller function defined below, so it can be 
      // assigned to this dynamicCtrl property? 
      $scope.dynamicCtrl = function($scope) { 
       $scope.result = 'not working yet'; 
      }; 

      //eg: 
      //$scope.dynamicCtrl = resolveCtrl('InnerCtrl');            
     } 
    ]) 

    .controller('InnerCtrl', ['$scope', 'service', 
     function($scope, service) { 
      $scope.result = service.getMessage(); 
     } 
    ]) 

    .factory('service', function() { 
     return { 
      getMessage: function() { return 'working!'; } 
     }; 
    }); 

ich den $ Injektor-Dienst versucht:

$scope.dynamicCtrl = $injector.get('InnerCtrl'); 

Aber das gibt : "Unbekannter Anbieter: InnerCtrlProvider < - InnerCtrl"

Ich dachte auch über den $ Controller-Dienst:

$scope.dynamicCtrl = $controller('InnerCtrl', {} /* don't want to hard code dependencies */); 

Aber das gibt mir "Unbekannten Anbieter: $ scopeProvider < - $ scope". Ich weiß, dass ich einen Spielraum schaffen könnte, um hineinzugehen, aber ich denke, dass angular sollte automatisch den Umfang und die Dienstabhängigkeiten für mich auflösen.

Wie kann ich eine Controller-Funktion von ihrem Namen als String zusammen mit ihren Abhängigkeiten auflösen, sodass sie einer Bereichsvariablen zugewiesen werden kann?

Answer 1

Ich war für die gleiche Sache suchen und jetzt nach wenigen Stunden schließlich funktioniert es:

Sie die $ Controller verwenden können - Service, aber wie Sie bemerkt haben, müssen Sie den Umfang auf eigene Faust erstellen:

$controller('InnerCtrl', { $scope: $scope.$new() }); 

Keine Sorge, alle anderen Variablen werden korrekt injiziert, aber Angular kann den neuen Bereich nicht selbst erstellen. Wenn Sie den Controller in Ihrem HTML hinzufügen möchten, dann ist es ein bisschen komplizierter, müssen Sie eine Funktion in $ Umfang haben, die den Konstruktor des Controllers aussetzt:

$scope.InnerCtrl = function() { 
    return $controller('InnerCtrl', { $scope: $scope.$new() }).constructor; 
} 

In HTML können Sie danach es verwenden, wie immer : <ANY ng-controller="InnerCtrl"></ANY>

Ich schrieb eine post darüber mit einigen zusätzlichen Details, aber das ist die wichtigste, um das Problem für Sie zu lösen.