AngularJS能否监听函数调用？跨控制器触发验证方案咨询

我来帮你拆解这两个AngularJS的问题，一步步讲清楚：

一、基础疑问：能否像监听变量一样监听函数调用？ #

你的示例代码里，控制台不会输出"foo watched"，原因有两个：

1. AngularJS的$scope.$watch默认监听的是$scope上下文内的表达式或属性值变化，你定义的foo函数并没有挂载到$scope上，所以$watch('foo')找不到有效的监听目标；
2. 就算你把foo挂载到$scope上（比如$scope.foo = foo），$watch监听的是值的引用变化——只要foo函数的引用没被替换，哪怕你多次调用它，$watch也不会触发，因为函数本身没有发生改变。

实现函数调用监听的可行方案 #

方案1：包装函数+监听调用标记

给原函数套一层包装，每次调用时更新一个标记变量，再监听这个变量的变化：

// 把函数挂载到scope并包装
$scope.foo = function() {
  console.log("foo called");
  // 更新调用次数标记
  $scope.fooCallCount = ($scope.fooCallCount || 0) + 1;
};

// 监听标记变量的变化
$scope.$watch('fooCallCount', function(newCount) {
  if (newCount) {
    console.log("foo watched");
  }
});

方案2：自定义事件触发

在函数调用时广播一个自定义事件，再监听这个事件：

function foo() {
  console.log("foo called");
  // 广播事件通知监听者
  $scope.$broadcast('fooWasCalled');
}

// 监听自定义事件
$scope.$on('fooWasCalled', function() {
  console.log("foo watched");
});

二、实际需求：按钮点击触发跨控制器的验证函数 #

你不想依赖$scope.flag的变化触发验证，而是希望按钮点击时直接调用txtCtrl里的handleValidations，推荐两种优雅的实现方式：

方案1：使用AngularJS事件系统（适配任意控制器关系） #

利用$rootScope的$broadcast发送全局事件，在目标控制器中监听该事件：

// btnCtrl 中的按钮点击逻辑
function onButtonClick() {
  $scope.flag = !$scope.flag;
  // 广播自定义事件
  $rootScope.$broadcast('triggerValidation');
}

// txtCtrl 中监听事件并执行验证
$scope.$on('triggerValidation', function() {
  handleValidations();
});

注意要在控制器中注入$rootScope才能使用这个方法。

方案2：封装共享服务（解耦性更强，推荐） #

把验证逻辑抽离到共享服务中，两个控制器都注入该服务，按钮点击时直接调用服务内的验证方法：

// 定义共享验证服务
app.service('ValidationService', function() {
  this.handleValidations = function(flag) {
    // 根据传入的flag执行对应验证逻辑
    if(flag) { 
      // 执行验证规则1
    } else { 
      // 执行验证规则2
    }
  };
});

// btnCtrl 注入服务并调用
app.controller('btnCtrl', function($scope, ValidationService) {
  function onButtonClick() {
    $scope.flag = !$scope.flag;
    // 直接调用服务的验证方法
    ValidationService.handleValidations($scope.flag);
  }
});

// txtCtrl 注入服务，输入变化时也调用验证
app.controller('txtCtrl', function($scope, ValidationService) {
  function onInputChange() {
    ValidationService.handleValidations($scope.flag);
  }
});

这种方式把验证逻辑从控制器中剥离，代码耦合度更低，更符合AngularJS的依赖注入设计理念。

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