How can I call/trigger one controller function in other controller in Angular js

Question

<div ng-app="myApp">
  <div ng-controller="FirstController">
     //In this controller i am having one insert Functionality on ng-click
  </div>
  <div ng-controller="secondController">
    //In this controller i am having one insert Functionality on ng-click
  </div>
  <div ng-controller="FinalController">
   //Here on ng-click i want to trigger all the other controller's click events
  </div>
</div>

Actually i am building an angular js app where i have different section's the the user can save his entered data, so for that reason each controller here is behaving as single entity and performing crude operations on button click of each controller. Now as in each controller there is insert functionality implemented on ng-click to send the data to the table. in final controller there is a save button where we need to trigger all the insert click's of different controllers how can i achieve this any quick suggestion's are appreciated.

You can view this question: [http://stackoverflow.com/questions/9293423/can-one-controller-call-another](http://stackoverflow.com/questions/9293423/can-one-controller-call-another) — faton, Feb 25 '16 at 09:28

Nijeesh · Accepted Answer · 2016-02-25T11:19:17.920

1

You can use $rootScope for that. Inject $rootScope into all controllers add then emit an event from finalcontroller to other controllers like this

In final controller

$rootScope.$emit('triggerClick'); // when you want to trigger click in other controllers

In firstController and secondController

$scope.yourFunction = function(){     //This will be executed on ng-click
    // InsertFunction code
}

$rootScope.$on('triggerClick', function() {      // this will be executed when you trigger from finalController
    // InsertFunction code
})

edited Feb 25 '16 at 11:19

answered Feb 25 '16 at 09:30

Nijeesh

848
7
11

Thanks Nijeesh it worked like a charm :) – Sultan Feb 25 '16 at 09:52
Thats great :) Glad that worked out for you :) – Nijeesh Feb 25 '16 at 09:56
@Nigesh: When i am doing this i am able to hit it from final controller but the function is not being executed from their own controller ex: firstcontroller – Sultan Feb 25 '16 at 10:55
This code was to be added to the code you already had. Don't remove the trigger function you already have in your controller. The rootScope.on is only for when you trigger that function from another controller. – Nijeesh Feb 25 '16 at 11:11

score 0 · Answer 2 · edited May 23 '17 at 12:07

You should use events to communicate between modules / in this case controllers in your angularjs apps. That is the proper approach.

ie using $on, $broadcast and $emit.

Emmiter

function someFunction(){// your buttonclick or whatever you want to sstart communication with
  $rootScope.$broadcast('eventName',{data: 100});//this should be remembered
}

Receiver

$rootScope.$on('eventName', function(event,args){// and here is why
  // acces with args.data
})

Look at this post , the answers apart from the correct one are also a good dive into the approaches for communication b/w app components.

score 0 · Answer 3 · answered Feb 25 '16 at 09:29

you'll need to broadcast a message from your final controller, and act upon it in the other controllers.

FinalController

function trigger(){
  $rootScope.$broadcast('yourEventName');
}

FirstController

$rootScope.$on('yourEventName', function(){
  //do your insert functionality
})

score 0 · Answer 4 · answered Feb 25 '16 at 09:30

0

If you want to trigger other controllers actions you must use services.

Implement your trigger actions in a service and then inject it in the other controller.

This is the "best practice" way to do that.

answered Feb 25 '16 at 09:30

eliagentili

619
5
9

any example would help me more as i am new to angular js – Sultan Feb 25 '16 at 09:31

How can I call/trigger one controller function in other controller in Angular js

4 Answers4