AngularJS中能否跨文件控制器调用另一控制器内的函数？

首先得明确：你直接用ng-click调用另一个控制器的函数肯定行不通，因为ng-click绑定的是当前元素所在控制器的作用域，而clickVideoWidgetListItemFromDOM是在videoWidgetController的作用域里，所以找不到这个方法。另外你说$broadcast/$emit只在同一文件生效，其实不是文件的问题，是你没找对作用域的通信方式——如果两个控制器是同级作用域（没有嵌套关系），用普通的$scope广播是传不到的，得用$rootScope，或者更推荐用服务来解耦。

给你三种可行的方案，按推荐程度排序：

1. 用共享服务封装逻辑（最推荐） #

AngularJS里控制器之间的通信最佳实践是通过服务，把需要共享的逻辑抽出来，两个控制器都依赖这个服务，直接调用方法就行，完全避免作用域事件的耦合。

步骤： #

首先创建一个服务，把clickVideoWidgetListItemFromDOM里的核心逻辑移进去：

// 假设你的模块叫app，根据实际情况替换
angular.module('app').service('VideoWidgetService', function() {
  // 封装原来的点击逻辑
  this.triggerListItemClick = function(video, index) {
    // 这里放你原来clickVideoWidgetListItemFromDOM里的代码
    console.log('处理视频列表项点击:', video, '索引:', index);
    // 如果需要通知videoWidgetController更新UI，可以在这里用$rootScope广播事件
  };
});

然后在videoController里注入服务，直接调用方法：

angular.module('app').controller('videoController', ['$scope', 'VideoWidgetService', function($scope, VideoWidgetService) {
  // 你的点击事件处理函数
  $scope.handleVideoClick = function(video, index) {
    // 直接调用服务的方法，不用管另一个控制器在哪
    VideoWidgetService.triggerListItemClick(video, index);
  };
}]);

最后在videoWidgetController里，要么直接把服务的方法绑定到作用域（方便模板调用），要么监听服务的事件更新UI：

angular.module('app').controller('videoWidgetController', ['$scope', 'VideoWidgetService', '$rootScope', function($scope, VideoWidgetService, $rootScope) {
  // 如果模板里还需要调用这个方法，直接绑定到作用域
  $scope.clickVideoWidgetListItemFromDOM = VideoWidgetService.triggerListItemClick;

  // 如果需要服务触发UI更新，比如刷新列表，可以在服务里广播事件，这里监听
  var unbindListener = $rootScope.$on('videoListItemUpdated', function(event, data) {
    // 这里处理UI更新逻辑，比如更新当前选中项
    $scope.selectedVideo = data.video;
  });

  // 控制器销毁时解绑监听，防止内存泄漏
  $scope.$on('$destroy', function() {
    unbindListener();
  });
}]);

2. 用$rootScope广播事件 #

如果暂时不想重构服务，可以用$rootScope来广播事件，因为$rootScope是全局作用域，所有控制器都能监听到。

步骤： #

在videoController里用$rootScope.$broadcast发送事件，带上参数：

angular.module('app').controller('videoController', ['$scope', '$rootScope', function($scope, $rootScope) {
  $scope.handleVideoClick = function(video, index) {
    // 广播自定义事件，把参数传过去
    $rootScope.$broadcast('videoWidgetListItemClicked', {
      video: video,
      index: index
    });
  };
}]);

在videoWidgetController里用$rootScope.$on监听事件，触发目标函数：

angular.module('app').controller('videoWidgetController', ['$scope', '$rootScope', function($scope, $rootScope) {
  // 监听广播的事件
  var unbind = $rootScope.$on('videoWidgetListItemClicked', function(event, data) {
    // 调用你的目标函数
    $scope.clickVideoWidgetListItemFromDOM(data.video, data.index);
  });

  // 一定要在控制器销毁时解绑监听，不然会有内存泄漏
  $scope.$on('$destroy', function() {
    unbind();
  });

  // 你的原有函数
  $scope.clickVideoWidgetListItemFromDOM = function(video, index) {
    // 原逻辑
    console.log('视频项被点击:', video, index);
  };
}]);

3. 利用作用域层级（仅适用于父子控制器） #

如果videoWidgetController是videoController的子作用域（比如videoWidgetController所在的元素嵌套在videoController的元素里），那可以不用$rootScope，直接用$scope.$broadcast（父控制器发事件，子控制器监听）：

在videoController里：

$scope.handleVideoClick = function(video, index) {
  $scope.$broadcast('videoWidgetListItemClicked', {video: video, index: index});
};

在videoWidgetController里监听：

var unbind = $scope.$on('videoWidgetListItemClicked', function(event, data) {
  $scope.clickVideoWidgetListItemFromDOM(data.video, data.index);
});
$scope.$on('$destroy', unbind);

为什么之前的$broadcast/$emit没生效？ #

大概率是因为你的两个控制器是同级作用域（比如分别在两个独立的ng-controller元素里，没有嵌套），这时候用普通的$scope.$broadcast（向下发）或$scope.$emit（向上发）都传不到对方，必须用$rootScope来全局广播。

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