AngularJS如何在另一个ngController中访问一个ngController的参数

Question

事情是这样的：

<div ng-controller="controller1">
   <div ng-controller="controller2" ng-init="controller2.someMethod(controller1.Data.someId)">
      {{something}}
   </div>
</div>

由于某种原因，我无法访问另一个控制器的 div 中的controller1.Data.someId，但我确实需要将此 ID 传递给另一个控制器的方法。

这怎么可能做到？

更新：

<div ng-controller="routesController as routesCtrl">
    <div class="ps-top-space-1" ng-controller="routeController as routeCtrl" ng-init="loadFromRouteInfoScreen(routesCtrl.RoutesData.apiRouteInfoResponse)">
        <ons-button modifier="large" ng-click="routeCtrl.addTickAndRouteRating()">Rate route or Add tick...</ons-button>
    </div>
</div>

其中 routesCtrl.RoutesData.apiRouteInfoResponse 是在 routesController 中设置的，并且应该有一个带有 route_id 的数据对象。 我的方法loadFromRouteInfoScreen(route_id) 正在触发一些其他功能（以及console.log）。

Answer 1

第一个控制器上有错字-ng-contoller="controller1"。如果这得到纠正，那么控制器将被正确创建，并且 controller2 将从 controller1 继承范围（请参阅 Scope inheritance 的 Angular 文档）并查看示例下面。

还要注意，在 HTML 中我们不需要引用控制器变量 - 省略该对象，因为我们可以直接访问作用域上的属性。所以而不是：

<div ng-controller="controller2" ng-init="controller2.someMethod(controller1.Data.someId)">

这样做：

<div ng-controller="controller2" ng-init="someMethod(Data.someId)">

var app = angular.module('app', []);
app.controller('controller1', ['$scope',
  function($scope) {
    $scope.Data = {
      someId: 3
    };
    $scope.something = 'something text';
  }
]);
app.controller('controller2', ['$scope',
  function($scope) {
    $scope.someMethod = function(id) {
      console.log('id: ', id, ' $scope.Data: ', $scope.Data);
    };
  }
]);

<script src="https://code.angularjs.org/snapshot/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="controller1">
    <div ng-controller="controller2" ng-init="someMethod(Data.someId)">
      {{something}}
    </div>
  </div>
</div>

更新：

由于您更新了您的问题以获得更多详细信息（例如，使用别名指定的控制器），我已采用该角度 HTML 并将其更改为下面的代码。请注意您实际上不需要在内联调用中引用别名？

请注意，我确实简化了按钮，因此我们不需要额外的指令。

var app = angular.module('app', []);
app.controller('routesController', ['$scope',
  function($scope) {
    console.log('routesController created');
    $scope.RoutesData = {
      apiRouteInfoResponse: "43 miles"
    };
    $scope.something = 'something text';
    $scope.addTickAndRouteRating = function() {
      console.log('addTickAndRouteRating() called');
    };
    $scope.loadFromRouteInfoScreen = function(response) {
      console.log('loadFromRouteInfoScreen() called - response:',response);
    };
  }
]);
app.controller('routeController', ['$scope',
  function($scope) {
    $scope.someMethod = function(id) {
      console.log('id: ', id, ' $scope.Data: ', $scope.Data);
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="routesController as routesCtrl">
    <div class="ps-top-space-1" ng-controller="routeController as routeCtrl" ng-init="loadFromRouteInfoScreen(RoutesData.apiRouteInfoResponse)">
      <button modifier="large" ng-click="addTickAndRouteRating()">Rate route or Add tick...</button>
    </div>
  </div>
</div>

Answer 2

您可以使用Controller As 语法来明确您是在嵌套范围内引用父变量还是子变量。

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

myApp.controller('controller1', function() {
  var vm = this;

  this.something = 'hello';

  vm.Data = {
    someId: 123
  };
});

myApp.controller('controller2', function() {
  var vm = this;

  this.something = 'world';

  this.someMethod = function(someId) {
    console.log('someId: ' + someId);
  }
});

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

<div ng-app="myApp">

  <div ng-controller="controller1 as ctrl1">
    <div ng-controller="controller2 as ctrl2"
         ng-init="ctrl2.someMethod(ctrl1.Data.someId)">
      {{ctrl1.something}} {{ctrl2.something}}
    </div>
  </div>

</div>

Answer 3

<!-- REPLACE
<div ng-contoller="controller1">
-->
<div ng-controller="controller1">
<!--        ^ --- spell controller correctly --> 
   <div ng-controller="controller2" ng-init="someMethod(Data.someId)">
      {{something}}
   </div>
</div>

只要子作用域上没有Data 属性，它就会原型继承自父作用域。