Call function from another controller Angularjs

Question

This is my simple controller :

XApp.controller('LoadCountriesController', function ($scope, GetAllCountries, $http, $location) {
 console.log('Step 3');
 var Obj = new Object();
 Obj.SPNAME = "GetAllCountry";
 $scope.countryData = GetAllCountries.query({ parameters: Obj }, function () {
 $scope.countryList = $scope.countryData;
 console.log(JSON.stringify($scope.countryList));
 });
 $scope.$on('bindmsDropDown', function (ngRepeatFinishedEvent) {
 var CountryCode = "in";
 //Check whether the cookie is already set
 var cookiename = 'currency';
 if ($.cookie(cookiename)) {
 $("#countries").val($.cookie(cookiename));
 CountryCode = $.cookie(cookiename);
 }
 else {
 $("#countries").val('in');
 $.cookie('currency', $("#countries").val(), { expires: 365, path: '/' });
 CountryCode = $("#countries").val();
 }
 $("#countries").msDropdown();
 });
});
XApp.factory('GetAllCountries', function ($resource) {
 console.log('Step 4');
 return $resource('api/master/:object?type=json', {}, { 'query': { method: 'GET', isArray: true } });
});

I am using the above controller to populate a drop down list :

<div class="CountryDDL" data-ng-controller="LoadCountriesController">
<select name="countries" id="countries" style="width: 84px; display: block;">
<option on-finish-render="bindmsDropDown" data-ng-repeat="country in countryList" value="{{ country.CountryCode }}" data-image="content/themes/msdropdown/icons/blank.gif" data-imagecss="flag {{ country.CountryCode }}" data-title="{{ country.CurrencyName }}" >{{ country.CurrencyCode }}</option></select></div>

I want to call a function (loadData) from another controller (ProductsController) on the onchange event of the select.

var ProductsController = function ($scope, GetProductsForIndex, $http, $location) {
 console.log('Step 1');
 $scope.products = [];
 $scope.busy = false;
 var indexPageNo = 0;
 $scope.loadData = function () {
 if ($scope.busy) return;
 $scope.busy = true;
 indexPageNo += 1;
 var Obj = new Object();
 Obj.PAGEINDEX = indexPageNo;
 Obj.PAGESIZE = 20;
 Obj.SPNAME = "index_get_products";
 Obj.PAGECOUNT = null;
 Obj.COUNTRYCODE = 'in'
 $scope.data = GetProductsForIndex.query({ parameters: Obj }, function () {
 console.log(JSON.stringify($scope.data));
 for (var i = 0; i < $scope.data.length ; i++) {
 $scope.products.push($scope.data[i]);
 }
 $scope.busy = false;
 });
 }
 //$scope.loadData();
 $scope.$on('bindWookmarkHandler', function (ngRepeatFinishedEvent) {
 console.log("done");
 if (indexPageNo === 1) {
 executeOnFirstLoad();
 } else {
 var handler = null;
 var options = {
 autoResize: true, // This will auto-update the layout when the browser window is resized.
 container: $('#main'), // Optional, used for some extra CSS styling
 offset: 17, // Optional, the distance between grid items
 itemWidth: 225 // Optional, the width of a grid item 
 };
 if (handler) handler.wookmarkClear();
 // Create a new layout handler.
 handler = $('#tiles li');
 handler.wookmark(options);
 }
 });
};
XApp.factory('GetProductsForIndex', function ($resource) {
 console.log('Step 2');
 return $resource('api/index/:object?type=json', {}, { 'query': { method: 'GET', isArray: true } });
});

Answer 1

You can use services to share data between controllers in AngularJS. See this stackoverflow question for more info.

Here's an example:

// declare the app with no dependencies
var myApp = angular.module('myApp', []);
// A service to share data between FirstCtrl and SecondCtrl
myApp.factory('Data', function(){
 return { FirstName: '' };
});
myApp.controller('FirstCtrl', function( $scope, Data ){
	$scope.Data = Data;
});
myApp.controller('SecondCtrl', function( $scope, Data ){
	$scope.Data = Data;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" style="width:500px;background:#d2d0d0; padding:10px 30px; margin:0 auto;">
		<div ng-controller="FirstCtrl">
 <b>First Controller</b><br/><br/>
			<input type="text" ng-model="Data.FirstName"><!-- Input entered here -->
			<br>Input is : <strong>{{Data.FirstName}}</strong><!-- Successfully updates here -->
		</div>
		<hr>
 <b>Second Controller</b><br/><br/>
		<div ng-controller="SecondCtrl">
			Input should also be here: {{Data.FirstName}}<!-- Successfully updated it here too -->
		</div>
	</div>

• LDS: You can pass through parent controler to child calle by id,second way create shared service and third one is broadcast.The three types of controller comunication is given in the bellow url .yopu can go through the url. maheshkanna.wordpress.com/2017/03/22/…