如何在AngularJs 1.7.x中從一個控制器調用方法到另一控制器，以刷新UI數據

Question

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

上面是我的sideBar.html文件，我在其中循環coApplicantList，此列表填充在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();
}]);

上面是我的sideBarCtrl.js文件，在其中填充“ coApplicantList”並在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);
         });        
    }
});

上面是我的其他控制器（'coApplicantProfileCtrl.js'），我在其中添加了將無縫附加到sideBar菜單的選項。 我想做的是將sideBarCtrl.js注入到我的'coApplicantProfileCtrl'控制器中，但這在其他地方壞了。 我的目標是刷新在'coApplicantProfileCtrl.js'中聲明的createNewCoApplicant（）成功方法內的側邊欄菜單項

我在sideBarCtrl.js文件中嘗試使用factory，但是在coApplicantProfileCtrl控制器內部注入時也失敗了。

Answer 1

嘗試$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);
         });        
    }
});

並在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();
}]);