I need a function from another controller to run at any given time, but the problem is that I can not do this in any way, I already tried with $ broadcast, $ emit and without success. This is my HTML:
<div class="row">
<div class="col-md-12">
<section class="pontuacao">
<i class="fa fa-gamepad"></i> <span class="moves">0</span> Jogada(s)
<div class="timer"></div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-8">
<ul class="container-game" id="cartao-deck">
<li class="cartao" type="carro">
</li>
<li class="cartao" type="cavalo">
</li>
<li class="cartao match" type="dog">
</li>
<li class="cartao" type="golfinho">
</li>
<li class="cartao" type="maquina">
</li>
<li class="cartao match" type="dog">
</li>
<li class="cartao" type="mergulho">
</li>
<li class="cartao" type="piscina">
</li>
<li class="cartao" type="carro">
</li>
<li class="cartao" type="relogio">
</li>
<li class="cartao" type="mergulho">
</li>
<li class="cartao" type="relogio">
</li>
<li class="cartao open show" type="golfinho">
</li>
<li class="cartao" type="piscina">
</li>
<li class="cartao" type="cavalo">
</li>
<li class="cartao" type="maquina">
</li>
<li class="cartao" type="urso">
</li>
<li class="cartao" type="sinuca">
</li>
<li class="cartao" type="sinuca">
</li>
<li class="cartao" type="urso">
</li>
</ul>
<button ng-click=startGame() type="button" class="btn btn-dark btn-lg mx-auto d-block">NOVA JOGADA</button>
</div>
<div class="col-md-4">
<!-- ANOTHER COMPONENT -->
<ranking></ranking>
</div>
</div>
gameCtrl.js
var app = angular.module('app');
app.controller('gameCtrl', ['$scope', '$uibModal', function($scope, $uibModal, $rootScope) {
...
$scope.congratulations = function() {
if ($scope.matchedCard.length == 2) {
alert('ACABOU');
//Here, i want call a function $scope.getPlayer() in controller ranking
clearInterval($scope.interval);
$scope.finalTime = $scope.timer.innerHTML;
$scope.player = [{
name: localStorage.getItem('playerName'),
moves: $scope.moves,
time: $scope.minute + " minutos " + $scope.second + " segundos"
}]
if (localStorage.getItem('players')) {
var totalPlayers = JSON.parse(localStorage.getItem('players'));
totalPlayers.push({
name: localStorage.getItem('playerName'),
moves: $scope.moves,
time: $scope.minute + " minutos " + $scope.second + " segundos"
})
localStorage.setItem('players', JSON.stringify(totalPlayers));
} else {
localStorage.setItem('players', JSON.stringify($scope.player));
}
var totalPlayers = JSON.parse(localStorage.getItem('players'));
};
}
}])
rankingController.js
var app = angular.module('app');
app.controller('rankingController', ['$scope', function($scope, $rootScope) {
$scope.getPlayer = function() {
$scope.players = JSON.parse(localStorage.getItem('players'));
}
}])
Another option would also be if it were possible to refresh only the component, as I need to list the data stored in localStorage shortly after the alert () Can anyone help me?