angularJS中的嵌套控制器 - 无法访问第三个控制器的第二个控制器

Question

我有3个div元素和3个控制器。

第二个控制器可以访问第一个控制器。但第三个不起作用。

var app = angular.module("app", []) 
 

 
     .controller("countryController", function() { 
 
      this.Name = "Turkey"; 
 
     }) 
 

 
     .controller("cityController", function() { 
 
      this.Name = "Istanbul"; 
 
     }) 
 

 
     .controller("streetController", function() { 
 
      this.Name = "Istiklal"; 
 
     })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="countryController as countryCtrl"> 
 
     {{countryCtrl.Name}} 
 
     <div ng-controller="cityController as cityCtrl"> 
 
      {{countryCtrl.Name}} - {{cityCtrl.Name}} 
 
     </div> 
 
     <div ng-controller="streetController as streetCtrl"> 
 
      {{countryCtrl.Name}} - {{cityCtrl.Name}} {{streetCtrl.Name}} 
 
     </div> 
 
    </div>

Answer 1

你不能得到{{cityCtrl.Name}}，因为它是第三个控制器的兄弟姐妹。相反，您可以使用$parent或$rootScope来获取该值。第二位指示内

或嵌套它：

var app = angular.module("app", []) 
 

 
    .controller("countryController", function() { 
 
    this.Name = "Turkey"; 
 
    }) 
 
    .controller("cityController", function() { 
 
    this.Name = "Istanbul"; 
 
    }) 
 
    .controller("streetController", function() { 
 
    this.Name = "Istiklal"; 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="countryController as countryCtrl"> 
 
    {{countryCtrl.Name}} 
 
    <div ng-controller="cityController as cityCtrl"> 
 
    {{countryCtrl.Name}} - {{cityCtrl.Name}} 
 

 
    <div ng-controller="streetController as streetCtrl"> 
 
     {{countryCtrl.Name}} - {{cityCtrl.Name}} {{streetCtrl.Name}} 
 
    </div> 
 
    </div><!--cityCtrl closed--> 
 
</div>

Answer 2

您不能访问这样说： streetCtrl是不的cityCtrl一个孩子。

这不是在控制器之间共享数据的最佳方式，您应该使用service。

这是一个dummy Fiddle显示它如何工作。