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顯示它如何工作。