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

<!-- 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属性，它就会原型继承父作用域。

Answer 3

您可以使用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>

AngularJS如何在另一个ngController

更新

3 个答案:

更新