AngularJS如何调用嵌套在父控制器内的ng-controller刷新数据

以下两种方案均适配你使用的AngularJS 1.x版本场景：

方案1：事件广播机制（推荐，无额外DOM开销） #

通过AngularJS自带的事件订阅/广播体系实现跨控制器通信，不会丢失控制器临时状态。

1. 首先在按钮所属的控制器中定义点击方法，广播重载事件：

// 按钮所在控制器代码
app.controller('yourOuterController', ['$scope', '$rootScope', function($scope, $rootScope) {
    $scope.recalcButton = function() {
        // 可在第二个参数中自定义传递的参数
        $rootScope.$broadcast('refreshAppealData', {forceReload: true});
    }
}])

2. 再在appealPartialController中监听事件，触发数据重载：

// appealPartialController 代码
app.controller('appealPartialController', ['$scope', 'yourDataService', function($scope, yourDataService) {
    // 把原有数据加载逻辑封装为独立方法
    function fetchAppealData() {
        // 此处替换为你原本的接口请求、数据赋值逻辑
        yourDataService.queryAppeals().then(function(res) {
            $scope.appealData = res.data;
        })
    }

    // 初始化时加载一次数据
    fetchAppealData();

    // 监听重载事件
    $scope.$on('refreshAppealData', function(event, params) {
        if(params.forceReload) {
            fetchAppealData();
        }
    })
}])

方案2：强制重载ng-include模板（适合不愿修改原有控制器逻辑的场景） #

通过动态修改ng-include的绑定路径，触发模板和控制器完整重新初始化，自动重新执行原有加载逻辑。

1. 先修改你的cshtml代码，把ng-include的固定路径改为变量绑定：

<div>
    <button type="button" ng-click="recalcButton()">Recalc Button</button>
</div>
<div ng-controller="appealPartialController">
    <div ng-include="appealTplUrl"></div>
</div>

2. 按钮所属控制器代码：

app.controller('yourOuterController', ['$scope', '$timeout', function($scope, $timeout) {
    // 初始化赋值模板路径
    $scope.appealTplUrl = '/Partials/appealsPartial.html';

    $scope.recalcButton = function() {
        // 先清空路径触发控制器卸载
        $scope.appealTplUrl = '';
        // 下一帧重置路径强制重新加载
        $timeout(function() {
            $scope.appealTplUrl = '/Partials/appealsPartial.html';
        }, 0)
    }
}])

注意：方案2会完整重置appealPartialController实例，控制器内未持久化的临时操作状态会被清空，按需选择。

内容的提问来源于stack exchange，提问作者Rmixon