AngularJS中如何在控制器内的$on监听器中访问注入服务

嘿，我看了你的代码，其实核心写法是没问题的——AngularJS控制器里注入的服务，借助JavaScript闭包特性，完全可以在$scope.$on的回调函数里直接访问。你遇到的“无法访问”问题，大概率是几个容易忽略的小细节导致的，下面给你逐一排查：

• 检查方法名拼写：你的代码里写的是myService.callServiceMethos，这里的方法名最后是methos，是不是手滑打错了？应该是callServiceMethod吧？这种拼写错误会让浏览器报错“方法不存在”，很容易被误以为是“访问不到服务”。

• 确认服务的注册与注入正确性：

  • 先确保myService已经被正确注册为AngularJS的服务，比如是不是用app.service('myService', ...)或者app.factory('myService', ...)定义的，而且没有拼写错误；
  • 检查控制器依赖注入数组里的'myService'字符串，和函数参数里的myService名称是否完全一致（包括大小写）——Angular的依赖注入是严格匹配名称的。

• 验证事件触发的时机：
  会不会是someEventFired事件在控制器完成初始化之前就触发了？这样你的监听器还没来得及注册，回调函数根本不会执行，自然看起来像是“服务访问不到”。可以在控制器初始化时和事件触发处分别加日志，确认执行顺序：

  app.controller('myCtrl', ['$scope', 'myService', function($scope, myService) {
    console.log('myCtrl 已初始化'); // 控制器初始化日志
    $scope.$on('someEventFired', function(event, dataFromEventThrower) {
      console.log('someEventFired 事件触发'); // 事件回调日志
      myService.callServiceMethod(dataFromEventThrower);
    });
  }]);
  

• 检查服务方法的暴露方式：
  确保myService里的callServiceMethod是对外暴露的，比如用service定义时要挂在this上，用factory定义时要包含在返回的对象里：

  // 用service定义的示例
  app.service('myService', function() {
    this.callServiceMethod = function(data) {
      // 你的服务逻辑
      console.log('服务方法执行，接收数据:', data);
    };
  });
  

给你一份修正了拼写问题的完整示例代码：

// 注册服务
app.service('myService', function() {
  this.callServiceMethod = function(data) {
    console.log('服务方法被调用，数据:', data);
    // 这里写你的服务逻辑
  };
});

// 定义控制器
app.controller('myCtrl', ['$scope', 'myService', function($scope, myService) {
  $scope.$on('someEventFired', function(event, dataFromEventThrower) {
    // 现在可以正常访问myService了
    myService.callServiceMethod(dataFromEventThrower);
  });
}]);

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