从angularjs中的服务调用控制器函数答案

【问题标题】：Call controller function from service in angularjs从angularjs中的服务调用控制器函数
【发布时间】：2015-05-07 04:29:11
【问题描述】：

我正在使用 socket.io 在我的应用程序中启用聊天功能，并且我正在使用服务 SocketService 来执行所有套接字内容。当收到消息时，我想从服务SocketService 触发控制器的功能，以在 UI 中进行一些更改。所以我想知道如何从服务中访问控制器的功能。示例代码：

.service('SocketService', function ($http,$rootScope,$q) {
  this.connect = function(){
    var socket = io();
    socket.on('connect',function(){
      // Call a function named 'someFunction' in controller 'ChatController'
    });
  }
});

这是服务的示例代码。

现在是控制器的代码

.controller('ChatController',function('SocketService',$scope){
  $scope.someFunction = function(){
     // Some Code Here
  }
});

【问题讨论】：

[stackoverflow.com/questions/20621028/… [1]: stackoverflow.com/questions/20621028/…

标签： angularjs events angularjs-service angularjs-controller angular-broadcast

【解决方案1】：

您可以通过使用角度事件$broadcast 或$emit 来实现这一点。

在您的情况下，$broadcast 会有所帮助，您需要在 $rootscope 中广播您的事件，该事件可以被具有相同事件名称的 $on 的所有子范围监听。

代码

.service('SocketService', function($http, $rootScope, $q) {
    this.connect = function() {
        var socket = io();
        socket.on('connect', function() {
            // Call a function named 'someFunction' in controller 'ChatController'
            $rootScope.$broadcast('eventFired', {
                data: 'something'
            });
        });
    }
});


.controller('ChatController', function('SocketService', $scope) {
    $scope.someFunction = function() {
        // Some Code Here
    }
    $scope.$on('eventFired', function(event, data) {
        $scope.someFunction();
    })
});

希望对你有帮助，谢谢。

【讨论】：

@PankajParkar：它也是我的问题的完美解决方案。在我的情况下，控制器没有嵌套，我必须从另一个发送更新。它就像 Ramban Ilaaj。

【解决方案2】：

我知道这是一个老问题，但我还有另一个选择。我对 $broadcast 有个人偏见——它只是感觉不是很“有棱有角”，我更喜欢在我的代码中进行显式调用。

因此，与其向控制器广播并触发另一个摘要循环，我更愿意让控制器将自己注册到服务中，如下所示。如果控制器使用相同的服务，请注意不要引入任何循环依赖。这最适用于 controllerAs 语法，因此调用服务不需要关心 $scope。

是的，这比 $broadcast 代码要多，但它确实让服务可以完全访问整个控制器 - 所有它的方法和属性。

.service('SocketService', function ($http,$rootScope,$q) {
  var _this = this;    
  this.chatController = null;
  this.registerCtrlr = function (ctrlr) {
    _this.chatController = ctrlr;
  };
  this.unRegisterCtrlr = function () {
    _this.chatController = null;
  };

  this.connect = function(){
    var socket = io();
    socket.on('connect',function(){
      // Call chatController.someFunction if chatController exists
      if (_this.chatController) {
        _this.chatController.someFunction();
      }
    });
  };
});

.controller('ChatController',['SocketService', '$scope', function(SocketService, $scope){
  SocketService.registerCtrlr(this);
  //-- make sure controller unregisters itself when destroyed - need $scope for this
  $scope.$on('$destroy', function () {
    SocketService.unRegisterCtrlr();
  });
  this.someFunction = function(){
    // Some Code Here
  }
}]);

【讨论】：

为什么要添加整个Controller？只需订阅特定功能。请记住，如果在函数内部修改了 $scope（或 vm），请使用 $scope.apply as a wrapper 通知视图的更改
好点，有几个注意事项：a) 注册特定函数时，一定要指明它绑定到的控制器 - 'SocketService.registerCtrlrFn(this.someFunction.bind(this)' , 和 b) 如果服务逻辑已经作为摘要循环的一部分运行，则不需要 $scope.apply 包装器。如果服务逻辑不是摘要循环的一部分，就像在原始问题中一样，它是必要的。如果它可能在也可能不在摘要周期内，请改用 $timeout 包装器。
更多信息$scope.apply vs $timeout
糟糕，在我的注册示例中遗漏了一个括号 - SocketService.registerCtrlrFn(this.someFunction.bind(this))

【解决方案3】：

我知道这篇文章已经过时了，但在与 Angular JS 打交道几年后，我想给我两分钱。我个人会重新考虑这种方法。理想情况下，使用 AngularJS，您可以修改控制器/指令以方便将数据传输到视图模型，并最终将 HTML 模板绑定到我称之为“用户友好”的视图模型。这个视图模型应该简单地反映您希望用户看到的内容和一般情况。在connect 事件发生的那一刻使用此方法，您应该绑定到服务数据的视图模型将在数据到达时反映对数据的更改。

【讨论】：