Доступ к Угловым службам взаимозаменяемым способом

Question

Я довольно новый для Углового. Я хочу показать список лидеров моим пользователям. Для того, чтобы достичь этого, я создал контроллер и два вида услуг, как так:

// Controller 
angular.module("App.Controllers.LeaderboardController", [ 
    "App.Services.LeaderboardService" 
]) 
.controller("LeaderboardController", ($scope, LeaderboardService) => { 
    $scope.users = LeaderboardService.fetch(); 
}); 

// Socket Service 
angular.module('App.Services.SocketService', [ 
    "socketio", 
    "App.Services.LeaderboardService" 
]) 
.service('SocketService', function (io, $state, LeaderboardService) { 
    this.socket 
    .on("connect",() => { 
     console.log("Socket connected"); 
    }) 
    .on("get leaderboard data emit", (res) => { 
     LeaderboardService.users = res; 
    }) 
    .on("disconnect",() => { 
     console.log("Socket disconnected"); 
    }); 
}); 

// Leaderboard Service 
angular.module('App.Services.LeaderboardService', [ 
    "App.Services.SocketService" 
]) 
.service('LeaderboardService', function (SocketService) { 

    this.users = []; 

    this.fetch =() => { 
     console.log("fetching..."); 
     SocketService.emit("get leaderboard data"); 
    } 
}); 

Это поток:

1. LeaderboardController просит LeaderboardService о таблице лидеров информации.
2. LeaderboardService сообщает SocketService для подключения к серверу и получения информации о лидерах.
3. SocketService звонит Leaderboard○Service и предоставляет необходимую информацию.

Однако есть проблемы. Оба SocketService и LeaderboardService зависят от каждого другого, поэтому Angular жалуется на это.

Circular dependency found: SocketService <- LeaderboardService <- SocketService 

Я хочу немного избавиться от сложности. Есть ли способ сделать следующее:

// PSEUDO CODE 
this.socket.on("get leaderboard data emit", (res) => { 
    angular.resolveController("LeaderBoardController", ($scope) { 
     $scope.users = res; 
    }); 
}); 

так что я могу позвонить и играть с контроллерами самостоятельно?

Было бы замечательно, если бы я смог узнать, как это сделать.

спасибо.

Answer 1

Я думаю, вы должны удалить службу сокета и просто сделать:

LEADERBOARD обслуживание:

angular.module('App.Services.LeaderboardService', [ 
    "socketio" 
]) 
.service('LeaderboardService', function() { 

    this.users = []; 

    this.fetch = (scope, callback) => { 

     const setUser = (res) => { 
      this.users = res; 
      callback(this.users); 
     }; 

     console.log("fetching..."); 

     this.socket.emit("get leaderboard data"); 
     this.socket.on('get leaderboard data emit', setUser); 

     scope.$on('$destroy',() => { 
      this.socket.off('get leaderboard data emit', setUser); 
     }); 

    } 

}); 

И в контроллере:

angular.module("App.Controllers.LeaderboardController", [ 
    "App.Services.LeaderboardService" 
]) 
.controller("LeaderboardController", ($scope, LeaderboardService) => { 
    LeaderboardService.fetch($scope, (users) => { 
     $scope.users = users; 
    }); 
}); 

Answer 2

Я нашел свое предпочтительное решение на AngularJS игровой IRC канал. icebox помог мне и решил проблему, так что кредиты идут ему.

---

Решение имеет другое обслуживание.

// Socket Service 
angular.module('App.Services.SocketService', [ 
    "socketio", 
    "App.Services.SharedDataService" 
]) 
.service('SocketService', function (io, SharedDataService) { 
    this.socket 
    .on("connect",() => { 
     console.log("Socket connected"); 
    }) 
    .on("get leaderboard data emit", (res) => { 
     SharedDataService.data = res; 
    }) 
    .on("disconnect",() => { 
     console.log("Socket disconnected"); 
    }); 
}); 

// Socket Service 
angular.module('App.Services.SharedDataService', []) 
.service('SharedDataService', function() { 
    this.data = []; 

    this.getData =() => { 
     return this.data; 
    }; 
}); 

В контроллерах, мы просто сослаться на SharedDataService так:

angular.module("App.Controllers.LeaderboardController", [ 
    "App.Services.SharedDataService" 
]) 
.controller("LeaderboardController", ($scope, SharedDataService) => { 
    $scope.users = SharedDataService.getData(); 
});