AngularJS 1中从PaymentAccessController调用ToolsController的closeTools()失败求助

下面提供几种可行的实现方式，解决你在PaymentAccessController中调用父控制器ToolsController的closeTools()方法的问题：

方法一：利用$scope继承（嵌套控制器场景） #

如果两个控制器是DOM嵌套关系（子控制器的视图在父控制器的视图范围内），可以通过$scope.$parent访问父控制器的实例：

修改子控制器的onCancel方法：

function onCancel(){
    // 调用父控制器实例的closeTools方法
    $scope.$parent.vmTool.closeTools();
}

注：如果父控制器在视图中使用了controllerAs语法（比如ng-controller="ToolsController as vmTool"），也可以直接通过$scope.vmTool.closeTools()调用。

方法二：封装到共享服务（推荐解耦方案） #

将工具关闭逻辑抽离到共享服务中，避免控制器间的直接依赖，更符合AngularJS的设计思想：

1. 创建共享服务：

(function(){
angular.module('ssuiTools').service('ToolsService', ToolsService);

function ToolsService(){
    this.closeTools = function(scope){
        scope.toolsList = [];
        scope.showToolsContainer = false;
        scope.isMaximised = true;
        scope.isZoomedOut = false;
    };
}
})();

2. 更新父控制器，依赖该服务：

ToolsController.$inject=['$scope', 'ToolsService'];

function ToolsController($scope, ToolsService){
    var vmTool = this;
    vmTool.closeTools = function(){
        ToolsService.closeTools($scope);
    };
    // 保留原有init等逻辑
}

3. 修改子控制器，注入服务并调用：

PaymentAccessController.$inject=['httpService','$scope','$filter','$q', 'ToolsService'];

function PaymentAccessController(httpService, $scope, $filter, $q, ToolsService){
    var vmPat =this;
    vmPat.onCancel =onCancel;
    // 保留原有init等逻辑

    function onCancel(){
        // 调用服务中的方法，传入父级scope
        ToolsService.closeTools($scope.$parent);
    }
};

方法三：使用事件广播机制 #

通过AngularJS的事件系统实现跨控制器通信：

1. 父控制器中监听自定义事件：

function ToolsController($scope){
    var vmTool = this;
    vmTool.closeTools = closeTools;

    // 监听"closeTools"事件，触发时执行关闭逻辑
    $scope.$on('closeTools', function(){
        closeTools();
    });

    // 保留原有init和closeTools逻辑
}

2. 子控制器中广播事件：

function onCancel(){
    // 向上广播事件，父控制器会接收并执行closeTools
    $scope.$emit('closeTools');
}

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