AngularJS How to access the parameter of one ngController in another ngController

Question

That's what:

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

For some reason, I cannot access the controller1.Data.someIddiv of another controller, but I really need to pass this identifier to another controller method.

How is this possible?

UPDATE:

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

If routeCtrl.RoutesData.apiRouteInfoResponse is set to routeController and must have a data object with route_id. My method loadFromRouteInfoScreen(route_id)calls some other functions (and a console.log).

Answer 1

- ng-contoller="controller1". , , 2 1 ( 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>

Hide result

:

, (, , ), 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>

Hide result

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

You Controller Ascan use syntax to indicate whether you are referring to a parent or child variable in a nested scope.

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>

Run codeHide result