how to call controller function on button click when my button is placed in different controller in angularjs

Question

I am new to AngularJS and making a single page application. Please see the attached screen shot I have a dropdown in which there is an apply button and on click of this button I want to call functions that are written in different controller. I have multiple dropdowns on a shell page I am attaching a screen shot of TimeLine dropdown for understanding. There are basically three dropdowns and they are same for every Tab that is why I've placed them in shell page. For example, there is one dropdown that is populating all clients name from database and have checkboxes so when user select multiple checkboxes and click on Apply button the view under these dropdown should be refreshed with new data.

// This controller function is used to get data from database and fill the dropdown.

 app.controller("FillDropDownController",function($scope,GetService,$rootScope){

    $rootScope.loading = true;
        // Calling Serivce Method here to get the data and fill dropdown
        $scope.GetDropDownValues = GetService.GetAll("CommonApi", "GetDropDownValues").then(function (d) {
            $scope.GetDropDowns = d;
            $rootScope.loading = false;
        });



// Here goes the function for ng-click = GetSelectedPractices() which gets the selected clients

$scope.GetSelectedPractices = function () { 
        $scope.selectedPractices = []; 
        angular.forEach($rootScope.PracticesList, function (d) { 
            if (d.selected == true) { 
                $scope.selectedClients.push(d.CLIENTNAME); 
            } 
        });  

        $scope.spanValues = $scope.selectedClients; 

    // I am stuck here that how to call controller functions for specific view

    }

    });

Here are two different controller functions (both are updating same view) that are fetching data from database and populate a table or draw a chart based on data. All these controller functions call a generic service to get the data. My problem is that my Apply Button dropdown is placed in shell page becuase if you see image no. 2 there are tabs on the page and this "Timeline" dropdown is same for all Tabs (On click of every tab there is a view loaded and its functions called and display table or draw charts on view).

app.controller("GetChargesController", function ($scope, GetService, $rootScope) {
    $scope.Title = "Charges Details List";
    $rootScope.loading = true;
    // Calling Serivce Method here to get the data
    $scope.GetChargesDetails = GetService.GetAll("CommonApi", "GetChargesDetails").then(function (d) {
        $scope.ChargesDetails = d;
        $rootScope.loading = false;
    });


     });

    app.controller("GetPaymentsController", function ($scope, GetService, $rootScope) {
    $scope.Title = "Payments Details List";
    $rootScope.loading = true;
    // Calling Serivce Method here to get the data
    $scope.GetPaymentsDetails = GetService.GetAll("CommonApi", "GetPaymentsDetails").then(function (d) {
        $scope.PaymentsDetails = d;               
        $rootScope.loading = false;
    });


     });

use emit/broadcast events for communication between controllers — Vinod Louis
– Vinod Louis, Commented Nov 22, 2016 at 6:40

Anil · Accepted Answer · 2016-11-22 07:11:51Z

2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Sample</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="app">

<div ng-controller="sample1Controller">
   <input type="button" value="Controller1" ng-click="sample1()"/>   
</div>
<div ng-controller="sample2Controller">  
</div>
</body>
<script>
var app=angular.module("app",[]);

app.controller("sample1Controller",["$scope",'$rootScope',function($scope,$rootScope){
$scope.sample1=function(){
$rootScope.$broadcast('message');
}
}]);

app.controller("sample2Controller",["$scope",'$rootScope',function($scope,$rootScope){
$scope.sample2=function(){
console.log('called on click on sample1 button from controller1');
}

$scope.$on('message',function(){ $scope.sample2();});

}]);
</script>
</html>

answered Nov 22, 2016 at 7:11

Anil

1,8776 gold badges22 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Faseeh Haris Over a year ago

It works fine first time on loading page but if i call sample2controller function again or more than 2 times, in same view/html on click of button. It shows me error in console that $scope.sample1 is not a function.

german meza · Accepted Answer · 2016-11-22 06:43:13Z

0

You could use the controller as vm technique this (in theory) gives you access to the controller in all the child scopes with the name you give to it here is a post about this technique.

answered Nov 22, 2016 at 6:43

german meza

311 bronze badge

2 Comments

german meza Over a year ago

I recommend you not to make questions this large sometimes the people just past away them xD

Faseeh Haris Over a year ago

Last time I've written small question and people were saying that question is very unclear to them and they down voted me :-( so I have tried to explain everything and share the code as well where I am stuck.

Deep · Accepted Answer · 2016-11-22 06:53:07Z

0

from you shell page controller, broadcast the event whenever the filter is applied.

  $rootScope.$broadcast('UPDATE-GRAPH');

In your different tabs controller receive the broadcasted event and perform action based on that.

 $rootScope.$on('UPDATE-GRAPH', function() {

       // call update function of your controller from here

      });

answered Nov 22, 2016 at 6:53

Deep

9,7962 gold badges24 silver badges34 bronze badges

Comments

Avinash Rathod · Accepted Answer · 2016-11-22 07:13:37Z

0

Hello You can directly extend your current controller with base controller so that it will access all function of it.

app.controller("BaseController",function($scope){
  // all functions you willing to call
});

app.controller("ExistingController",function($scope){
  // inherit base controller, using this even though your functions are in base   // controller it will get called
   $controller('BaseController', {$scope: $scope});
});

answered Nov 22, 2016 at 7:13

Avinash Rathod

6105 silver badges15 bronze badges

Collectives™ on Stack Overflow

how to call controller function on button click when my button is placed in different controller in angularjs

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related