angularJSのネストされたコントローラ - 3番目のコントローラからの2番目の制御器へのアクセスなし

Question

3つのdiv要素と3つのコントローラがあります。

第2コントローラは第1コントローラにアクセスできます。 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

それが第3のコントローラの兄弟であるとして、あなたは{{cityCtrl.Name}}を取得することはできません。代わりに、$parentまたは$rootScopeのいずれかを使用して値を取得できます。二contoller内

それとも巣にそれを：あなたはそれをこのようにアクセスすることはできません

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です。