How to call method from one controller to other controller in AngularJs 1.7.x, to refresh the UI data

<style>
.sidebar .logo img {
display: none;
}

.sidebar.active .logo img {
display: inline-block;
}

.sidebar.active .logo .first-letter {
display: none !important;
}

.sidebar .logo .first-letter {
display: block;
}

.first-letter {
margin: 0;
font-size: 30px;
color: red;
}

.logo {
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="logo text-center">
<img src="assets/img/VfinanceSLogo.png" width="150">
<h1 class="first-letter">V</h1>
</div>
<div class="sidebar-wrapper"
data-ng-if="user.userType == Constant.UserType.BORROWER.id">
<ul class="nav">
<li data-ui-sref-active="active"><a href="javascript:void(0)"
data-ui-sref="web.lams.brDashboard"> <i class="material-icons">dashboard</i>
<p class="item-name">Dashboard</p>
</a></li>
<li data-ui-sref-active="active"><a href="javascript:void(0)" data-ui-sref="web.lams.applicationList"> <i class="material-icons">Applications</i>
<p class="item-name">Applications</p></a></li>

<li data-ng-repeat="coApplicant in coApplicantList" data-ui-sref-active="active">
<a href="javascript:void(0)" data-ui-sref="web.lams.coApplicants({id : coApplicant.id, parentUserId : coApplicant.parentUserId})">
<i class="material-icons">{{ coApplicant.id }}</i> <p class="item-name">{{coApplicant.firstName}}</p></a>
</li>
</ul>
</div>



<div class="sidebar-wrapper"
data-ng-if="user.userType == Constant.UserType.LENDER.id">
<ul class="nav">
<li data-ui-sref-active="active"><a href="javascript:void(0)"
data-ui-sref="web.lams.products"> <i class="material-icons">dashboard</i>
<p class="item-name">Dashboard</p>
</a></li>
</ul>
</div>


<div class="sidebar-wrapper"
data-ng-if="user.userType == Constant.UserType.USER_TYPE.id">
<ul class="nav">

<li data-ui-sref-active="active"><a href="javascript:void(0)"
data-ng-click="go()"> <i class="material-icons">Clients</i>
<p class="item-name">Clients</p>
</a></li>
</ul>
</div>
<script>
$('.sidebar').hover(function() {
$('.sidebar').toggleClass('active');

}, function() {
$('.sidebar').toggleClass('active');

})
</script>


Above is my sideBar.html file where I am looping coApplicantList and this list is populated inside sideBarCtrl.js.

angular.module("lams").controller("sideBarCtrl",["$scope","$rootScope","Constant","applicationService",
function($scope,$rootScope,Constant,$state,Notification, applicationService) {

$scope.coApplicantList = ;

$scope.getSideBarMenus = function() {
applicationService.getCoApplicants().then(
function(success) {
console.log("getSideBarMenus :: success");
if (success.data.status == 200) {
$scope.coApplicantList = success.data.data;
}
}, function(error) {});
}
$scope.getSideBarMenus();
}]);


Above is my sideBarCtrl.js file where I am populating the 'coApplicantList' and rendered on sideBar.html

angular.module("lams").controller("coApplicantProfileCtrl", function($scope, $http, ) {
$scope.documentResponse = {};

$scope.createNewCoApplicant = function(){
console.log("createNewCoApplicant");
userService.creatCoApplicantProfile($scope.userData).then(
function(success) {
$scope.isDisable = false;
if(success.data.status == 200){
Notification.info("Co-Applicant Added Successfully !");
$uibModalInstance.close('closed');
applicationService.getSideBarMenus();
$scope.getSideBarMenus(); // I am trying to assume that scope variable which i am having inside my controller is globally declared, How can I call method that will refresh sideBarCtrl.js data and refresh the sideBar.html UI ?

}else{
Notification.error(success.data.message);
}
}, function(error) {
$scope.isDisable = false;
$rootScope.validateErrorResponse(error);
});
}
});


Above is my other controller('coApplicantProfileCtrl.js') where I am adding option that will append to sideBar menus seamlessly.
What I am trying to do is inject sideBarCtrl.js to my 'coApplicantProfileCtrl' controller but this is breaking somewhere else. my objective is to refresh side bar menu items inside success method of createNewCoApplicant() declared inside 'coApplicantProfileCtrl.js'

I tried with factory in sideBarCtrl.js file but that is also failing in injecting inside coApplicantProfileCtrl controller.

1 Answer
1

Try $emit, which will emit an event

$emit

angular.module("lams").controller("coApplicantProfileCtrl", function($scope, $http,$rootScope ) {
$scope.documentResponse = {};

$scope.createNewCoApplicant = function(){
console.log("createNewCoApplicant");
userService.creatCoApplicantProfile($scope.userData).then(
function(success) {
$scope.isDisable = false;
if(success.data.status == 200){
Notification.info("Co-Applicant Added Successfully !");
$uibModalInstance.close('closed');
applicationService.getSideBarMenus();
$rootScope.$emit('refresh-sidebar',data_if_any);

}else{
Notification.error(success.data.message);
}
}, function(error) {
$scope.isDisable = false;
$rootScope.validateErrorResponse(error);
});
}
});


And in sideBarCtrl

angular.module("lams").controller("sideBarCtrl",["$scope","$rootScope","Constant","applicationService",
function($scope,$rootScope,Constant,$state,Notification, applicationService) {

$scope.coApplicantList = ;

$scope.getSideBarMenus = function() {
applicationService.getCoApplicants().then(
function(success) {
console.log("getSideBarMenus :: success");
if (success.data.status == 200) {
$scope.coApplicantList = success.data.data;
}
}, function(error) {});
}

$rootScope.$on('refresh-sidebar',function(event,data){
// you can access 'data_if_any' as 'data' variable
$scope.getSideBarMenus();
})

$scope.getSideBarMenus();
}]);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.