Reputation: 815
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');
};
};
Upvotes: 1
Views: 102
Reputation: 2862
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;
});
}
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
Upvotes: 1
Reputation: 815
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');
};
};
Upvotes: 0
Reputation: 3944
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/
Upvotes: 3