web-dev-qa-db-ja.com

angularjsのサービスからコントローラー関数を呼び出す

私は自分のアプリでチャットを有効にするために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
  }
});
angularjseventsangularjs-serviceangularjs-controllerangular-broadcast
14
Vinit Chouhan

angular events $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();
    })
});

これがあなたに役立つことを願っています、ありがとう。

35
Pankaj Parkar

これは古い質問であることはわかっていますが、別の方法があります。私は$ 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
  }
}]);
1
grumpyhoser

私はこの投稿が古いことに気づきましたが、Angular JSを数年間扱った後、2セントを差し上げます。私は個人的にこのアプローチを再考します。AngularJSで理想的には、コントローラーを変更します/ directiveを使用すると、ビューモデルへのデータの転送が容易になり、最終的にはHTMLテンプレートを「ユーザーフレンドリー」なビューモデルと呼ばれるものにバインドできます。このビューモデルは、ユーザーが見たいものをいつでも一般的に反映する必要があります。このメソッドを使用すると、 connectイベントが発生すると、サービスのデータにバインドする必要のあるビューモデルに、データが到着した瞬間のデータの変更が反映されます。

0
Ian G