angularjs- calling method of one controller in another

Question

Hi I am working on a project where I have a button for subscribe/unsubscribe notification.I am using bootstrap modal on this button click and if user selects ok I perform the required operation.Everything is working fine just in the end in order to refresh my list I need to call method my another controller.I tried using $emit-$on but unable to use that.Please help how to call my GetAssignedIssues() method of myIssuesController from ModalInstanceCtrl controller.

angularjs code

 //controller1
 var myIssuesController = function($scope, $sce, $http, cfpLoadingBar, deviceDetector, $filter, $modal, $log) {
$("#navMyIssues").addClass("active");
$scope.issueCommnets = null;
$scope.showComments = false;
$scope.Issues = [];
$scope.dateFormat = 'dd-MMM-yyyy';
$scope.dateTimeFormat = 'dd-MMM-yyyy h:mm:ss a';
$scope.selectedIssue = null;
$scope.statusName = null;
$scope.ProjectDetails = [];
$scope.selectedProject = null;
$scope.isVisible = false;
$scope.isVisibleReply = false;
$scope.notifiedMembers = null;
$scope.defaultProfileImagePath = "";

 //get all assigned issues
$scope.GetAssignedIssues = function() {
    alert('test');
    //$scope.issueCount = -1;
    $scope.issuesLoaded = false;
    $scope.issueDetailsLoaded = false;
    $scope.query = "";
    var url = window.location.protocol + '//' + window.location.host + '/api/Issues' + '/GetAllAssignedIssues/';
    $http.post(url, []).success(function(data, status, headers, config) {
        if (data != '' || data.length == 0) {
            $scope.Issues = data;
            $scope.Issues = $filter('orderBy')($scope.Issues, 'CreatedOn', true);
            for (var count = 0; count < $scope.Issues.length; count++) {
                if ($scope.Issues[count].StatusName == "Pending") {
                    $scope.pendingIssueCount = $scope.pendingIssueCount + 1;
                } else if ($scope.Issues[count].StatusName == "In Progress") {
                    $scope.inprogressIssueCount = $scope.inprogressIssueCount + 1;
                } else if ($scope.Issues[count].StatusName == "Limitation") {
                    $scope.limitationIssueCount = $scope.limitationIssueCount + 1;
                } else if ($scope.Issues[count].StatusName == "Needs Research") {
                    $scope.needsresearchIssueCount = $scope.needsresearchIssueCount + 1;
                } else if ($scope.Issues[count].StatusName == "In Testing") {
                    $scope.intestingIssueCount = $scope.intestingIssueCount + 1;
                }
            }
            if (data.length != 0) {
                if ($scope.selectedIssue == null) {
                    $scope.selectedIssue = $scope.Issues[0];
                } else {
                    for (var count = 0; count < $scope.Issues.length; count++) {
                        if ($scope.Issues[count].Id == $scope.selectedIssue.Id) {
                            $scope.selectedIssue = $scope.Issues[count];
                        }
                    }
                }
            }
            $scope.issuesLoaded = true;
            $scope.showIssueDetails($scope.selectedIssue);
        } else {
            $scope.errors.push(data.error);
            //$scope.issueCount = -1;
        }
        if ($scope.isVisible == false) {
            $("#changedetailsbox").hide();
            $scope.isVisible = true;
        }
        if ($scope.isVisibleReply == false) {
            $("#postReplybox").hide();
            $scope.isVisibleReply = true;
        }
    }
    );
};

  $scope.$on("eventAssignedIssues", function (event,args) {
     alert('test1');
    $scope.GetAssignedIssues();
});
};

//controller 2
 var ModalInstanceCtrl = function ($scope, $modalInstance,modalHeader,modalBody,issueId,issueEmailId,$http) {
 $scope.modalHeader=modalHeader;
 $scope.modalBody=modalBody;
 $scope.issueId=issueId;
 $scope.issueEmailId=issueEmailId;
 $scope.ok = function () {
   if($scope.modalHeader=="Delete Issue")
   {

   }
   else if($scope.modalHeader=="Subscribe")
   {
     var issueNotification = { issueId: $scope.issueId, email: $scope.issueEmailId };
        var url = window.location.protocol + '//' + window.location.host + '/api/Issues' + '/SubscribeIssueNotification/';
        $http.post(url, JSON.stringify(issueNotification)).success(function (data, status, headers, config) {
            if (data == "true" || data == true) {
                //$scope.GetAssignedIssues();
                 $scope.$root.broadcast("eventAssignedIssues",{});
            } else {
                $scope.errors.push(data.error);
            }
            $scope.showeditdesc = true;
        });
   }
   else if($scope.modalHeader=="Unsubscribe")
   {
   //for unsubscribing
        var issueId = $scope.issueId;
        var url = window.location.protocol + '//' + window.location.host + '/api/Issues' + '/UnsubscribeIssueNotification/';
        $http.post(url, JSON.stringify({ issueId: issueId })).success(function (data, status, headers, config) {
            if (data == "true" || data == true) {
                //$scope.GetAssignedIssues();
                 $scope.$root.broadcast("eventAssignedIssues",{});
            } else {
                $scope.errors.push(data.error);
            }
            $scope.showeditdesc = true;
        });
   }
    $modalInstance.close();
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};
 };

You can use services to share methods between controllers.

Manish Kr. Shukla
– Manish Kr. Shukla

2015-06-09 10:26:16 +00:00
Commented Jun 9, 2015 at 10:26 — Manish Kr. Shukla
– Manish Kr. Shukla, Commented Jun 9, 2015 at 10:26

Shubham Nigam · Accepted Answer · 2015-06-09 10:24:37Z

3

use $rootScope.broacast() if you want to communication between two sibbling controllers Please Refer this link wonderful explanation http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

answered Jun 9, 2015 at 10:24

Shubham Nigam

3,97821 silver badges33 bronze badges

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

7 Comments

rupinder18 Over a year ago

if I use $rootScope it gives error $rootScope is not defined

Shubham Nigam Over a year ago

define it in your module in a particular line:var myIssuesController = function($rootScope,$scope, $sce, $http, cfpLoadingBar, deviceDetector, $filter, $modal, $log) {

rupinder18 Over a year ago

I tried defining also but still getting same error..have I used $on and $brodcast correctly?

Shubham Nigam Over a year ago

No use it correctly $rootScope.$on("eventAssignedIssues", function (event,args) { alert('test1'); $scope.GetAssignedIssues(); }); and broadcast $rootScope.broadcast("eventAssignedIssues");

rupinder18 Over a year ago

still getting $rootScope is not defined error I have defined it also as you said

|

Community · Accepted Answer · 2017-05-23 12:22:06Z

using the service , factory , value will serve you the purpose of sharing data

using of $emit and $broadcast will do the job for you ,which is as shown below

  function firstCtrl($scope,$rootScope) {

    $scope.broadcast = function(bcMsg){

     $scope.broadcastMsg = bcMsg;
     $rootScope.$broadcast('broadC',$scope.broadcastMsg);
  }  

   $rootScope.$on('emitC',function(events,data){
      $scope.emitMsg = data;
   });
}


 //second controller
  myApp.controller('secondCtrl',secondCtrl);

   //inject dependencies
  secondCtrl.$inject = ["$scope","$rootScope"];

 function secondCtrl($scope,$rootScope) {

 $scope.$on('broadC',function(events,data){
    $scope.broadcastMsg=data;
});

     $rootScope.$on('emitC',function(events,data){
        $scope.emitMsg = data;
      });

    }

http://jsfiddle.net/shushanthp/w4pwkkcq/

sharing the data between the controller using directives is also possible using require in the directive Using "require" in Directive to require a parent Controller

rupinder18 · Accepted Answer · 2015-06-09 11:16:01Z

To understand events read this article- enter link description here I have found the solution with @Shubham Nigam help,so thanks to him too-firstly we need to define $rootScope in both controllers and use $on and $broadcast using $rootScope.Here is my updated code

Answer

  //controller1
 var myIssuesController = function($rootScope,$scope, $sce, $http, cfpLoadingBar, deviceDetector, $filter, $modal, $log) {
$("#navMyIssues").addClass("active");
$scope.issueCommnets = null;
$scope.showComments = false;
$scope.Issues = [];
$scope.dateFormat = 'dd-MMM-yyyy';
$scope.dateTimeFormat = 'dd-MMM-yyyy h:mm:ss a';
$scope.selectedIssue = null;
$scope.statusName = null;
$scope.ProjectDetails = [];
$scope.selectedProject = null;
$scope.isVisible = false;
$scope.isVisibleReply = false;
$scope.notifiedMembers = null;
$scope.defaultProfileImagePath = "";

 //get all assigned issues
$scope.GetAssignedIssues = function() {
    alert('test');
    //$scope.issueCount = -1;
    $scope.issuesLoaded = false;
    $scope.issueDetailsLoaded = false;
    $scope.query = "";
    var url = window.location.protocol + '//' + window.location.host + '/api/Issues' + '/GetAllAssignedIssues/';
    $http.post(url, []).success(function(data, status, headers, config) {
        if (data != '' || data.length == 0) {
            $scope.Issues = data;
            $scope.Issues = $filter('orderBy')($scope.Issues, 'CreatedOn', true);
            for (var count = 0; count < $scope.Issues.length; count++) {
                if ($scope.Issues[count].StatusName == "Pending") {
                    $scope.pendingIssueCount = $scope.pendingIssueCount + 1;
                } else if ($scope.Issues[count].StatusName == "In Progress") {
                    $scope.inprogressIssueCount = $scope.inprogressIssueCount + 1;
                } else if ($scope.Issues[count].StatusName == "Limitation") {
                    $scope.limitationIssueCount = $scope.limitationIssueCount + 1;
                } else if ($scope.Issues[count].StatusName == "Needs Research") {
                    $scope.needsresearchIssueCount = $scope.needsresearchIssueCount + 1;
                } else if ($scope.Issues[count].StatusName == "In Testing") {
                    $scope.intestingIssueCount = $scope.intestingIssueCount + 1;
                }
            }
            if (data.length != 0) {
                if ($scope.selectedIssue == null) {
                    $scope.selectedIssue = $scope.Issues[0];
                } else {
                    for (var count = 0; count < $scope.Issues.length; count++) {
                        if ($scope.Issues[count].Id == $scope.selectedIssue.Id) {
                            $scope.selectedIssue = $scope.Issues[count];
                        }
                    }
                }
            }
            $scope.issuesLoaded = true;
            $scope.showIssueDetails($scope.selectedIssue);
        } else {
            $scope.errors.push(data.error);
            //$scope.issueCount = -1;
        }
        if ($scope.isVisible == false) {
            $("#changedetailsbox").hide();
            $scope.isVisible = true;
        }
        if ($scope.isVisibleReply == false) {
            $("#postReplybox").hide();
            $scope.isVisibleReply = true;
        }
    }
    );
};

 $rootScope.$on('eventAssignedIssues', function (event, args) {
    $scope.GetAssignedIssues();
});
};

//controller 2
 var ModalInstanceCtrl = function ($rootScope,$scope, $modalInstance,modalHeader,modalBody,issueId,issueEmailId,$http) {
 $scope.modalHeader=modalHeader;
 $scope.modalBody=modalBody;
 $scope.issueId=issueId;
 $scope.issueEmailId=issueEmailId;
 $scope.ok = function () {
   if($scope.modalHeader=="Delete Issue")
   {

   }
   else if($scope.modalHeader=="Subscribe")
   {
     var issueNotification = { issueId: $scope.issueId, email: $scope.issueEmailId };
        var url = window.location.protocol + '//' + window.location.host + '/api/Issues' + '/SubscribeIssueNotification/';
        $http.post(url, JSON.stringify(issueNotification)).success(function (data, status, headers, config) {
            if (data == "true" || data == true) {
                //$scope.GetAssignedIssues();
                 $rootScope.$broadcast('eventAssignedIssues');
            } else {
                $scope.errors.push(data.error);
            }
            $scope.showeditdesc = true;
        });
   }
   else if($scope.modalHeader=="Unsubscribe")
   {
   //for unsubscribing
        var issueId = $scope.issueId;
        var url = window.location.protocol + '//' + window.location.host + '/api/Issues' + '/UnsubscribeIssueNotification/';
        $http.post(url, JSON.stringify({ issueId: issueId })).success(function (data, status, headers, config) {
            if (data == "true" || data == true) {
                //$scope.GetAssignedIssues();
                 $rootScope.$broadcast('eventAssignedIssues');
            } else {
                $scope.errors.push(data.error);
            }
            $scope.showeditdesc = true;
        });
   }
    $modalInstance.close();
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};
 };

Collectives™ on Stack Overflow

angularjs- calling method of one controller in another

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related