Question

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

第二个控制器可以访问第一个控制器。但第三个没有工作。

＆＃13;

 var app = angular.module("app", [])

        .controller("countryController", function () {
            this.Name = "Turkey";
        })

        .controller("cityController", function () {
            this.Name = "Istanbul";
        })

        .controller("streetController", function () {
            this.Name = "Istiklal";
        })

＆＃13;

<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>

＆＃13;

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

您无法以这种方式访问它： "smtp.gmail.com" instead of "smpt.gmail.com" 不是streetCtrl的孩子。

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

这是dummy Fiddle，展示了它是如何运作的。

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

2 个答案: