How to call a method from a controller to another controller in angular js

Question

I have a view for SidebarController like below -

<a ng-click="reachMe($event);$event.preventDefault()" ng-href="#/app/hello">

Before going to the link I want to call reachMe() to check some changes on page and need to show an alert if any changes made

function SidebarController($rootScope, $scope, $state, $location, SidebarLoader){ $scope.reachMe = function(event){ //here I want to call function isPageChanged() from StaticPageController //something like this // if StaticPageController.isPageChanged() return true // then show alert // else // $location.url($href) } }

provide some code please

Jester
– Jester

2017-08-31 06:58:26 +00:00
Commented Aug 31, 2017 at 6:58 — Jester
– Jester, Commented Aug 31, 2017 at 6:58

Sangwin Gawande · Accepted Answer · 2017-08-31 07:50:23Z

Update 1 : Not sure about this, But give it a try.

<div ng-app="testApp" ng-controller="ControllerOne"> <button ng-click="methodA();"> Call Another Controller</button> </div> <script> var app = angular.module('testApp', []); app.controller('ControllerOne', function($scope, $rootScope) { $scope.reachMe = function() { var arrayData = [1,2,3]; $rootScope.$emit('callEvent', arrayData); if($rootScope.isChanged){ // Show Alert }else{ //Go to route } } }); app.controller('ControllerTwo', function($scope, $rootScope,$state) { $scope.checkSomethingChanged = function() { alert("Hello"); $rootScope.isChanged = true; } $rootScope.$on('callEvent', function(event, data) { console.log(data); $scope.checkSomethingChanged(); }); });

Following method worked for me perfectly :

<div ng-app="testApp" ng-controller="ControllerOne"> <button ng-click="methodA();"> Call Another Controller</button> </div> <script> var app = angular.module('testApp', []); app.controller('ControllerOne', function($scope, $rootScope) { $scope.methodA = function() { var arrayData = [1,2,3]; $rootScope.$emit('callEvent', arrayData); } }); app.controller('ControllerTwo', function($scope, $rootScope) { $scope.reachMe = function() { alert("Hello"); } $rootScope.$on('callEvent', function(event, data) { console.log(data); $scope.reachMe(); }); }); </script>

I improved my question.. can you please check now and provide solution

Jester · Accepted Answer · 2017-08-31 07:11:15Z

A controller is not the right concept for sharing functionality. Use a Factory or Service for that.

var logicFactory = function () { return { methodA: function () { }, methodB: function() { } }; }

You can then inject that factory into each controller where it is needed like:

var ControllerA = function ($scope,logicFactory) { $scope.logic = logicFactory; } ControllerA.$inject = ['$scope', 'logicFactory'];

Another option is to use the broadcast/emit Patern. But I would use that only where really necessary: Usage of $broadcast(), $emit() And $on() in AngularJS

Ok, But my method used the modal/variables/directives from the controller. Those will work in factory?
I improved my question.. can you please check now and provide solution

Collectives™ on Stack Overflow

How to call a method from a controller to another controller in angular js

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related