Search code examples
javascriptangularjsangularjs-directiveangularjs-scope

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

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.

image

// 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;
    });


     });
Solution 

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