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

Question

事情是这样的:

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

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

这怎么可能？

更新:

<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

第一个 Controller 上有一个拼写错误 - ng-contoller="controller1"。如果这个问题得到纠正，那么 Controller 将被正确创建，并且 controller2 将从 controller1 继承范围(请参阅 Angular 文档中的 Scope inheritance )并查看示例下面。

另请注意，在 HTML 中我们不需要引用 Controller 变量 - 省略该对象，因为我们可以直接访问作用域上的属性。所以不是:

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

更新:

由于您更新了问题以提供更多详细信息(例如，使用别名指定的 Controller )，我已经采用了该 Angular 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>