Verwendung eines Controllers in einem anderen Controller in AngularJS

Question

Warum kann ich nicht an die Controller-Variable im zweiten Controller binden?

<div ng-app="ManagerApp"> 
    <div ng-controller="MainCtrl"> 
     Main: 
     <div ng-repeat="state in states"> 
      {{state}} 
     </div> 
     <div ng-controller="InsideCtrl as inside"> 
      Inside: 
      <div ng-repeat="state in inside.states2"> 
       {{state}} 
      </div> 
     </div> 
    </div> 
</div> 

var angularApp = angular.module('ManagerApp', []); 

angularApp.controller('MainCtrl', ['$scope', function ($scope) { 
    $scope.states = ["NY", "CA", "WA"]; 
}]); 

angularApp.controller('InsideCtrl', ['$scope', function ($scope) { 
    $scope.states2 = ["NY", "CA", "WA"]; 
}]); 

Beispiel: https://jsfiddle.net/nukRe/135/

Zweite ng-Repeat funktioniert nicht.

Answer 1

Wie Sie controllerAs verwenden Sie this Stichwort

in Controller verwenden sollten

angularApp.controller('InsideCtrl', [ function() { 
    var vm = this; 
    vm.states2 = ["NY", "CA", "WA"]; 
}]); 

Forked Fiddle

HINWEIS

Technisch sollten Sie zu einem Zeitpunkt ein Ansatz folgen. Verwechseln Sie nicht diese zwei Muster zusammen, verwenden Sie entweder controllerAs Syntax/normale Controller Erklärung, wie Sie für MainCtrl tat mit $scope

Answer 2

entfernen

als innen

von hier :

<div ng-controller="InsideCtrl as inside">.210, so dass:

`<div ng-controller="InsideCtrl">` 

Answer 3

<div ng-app="ManagerApp"> 
    <div ng-controller="MainCtrl"> 
     Main: 
     <div ng-repeat="state in states"> 
      {{state}} 
     </div> 
     <div ng-controller="InsideCtrl"> 
      Inside: 
      <div ng-repeat="state in states2"> 
       {{state}} 
      </div> 
     </div> 
    </div> 
</div>