0

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>&nbsp;<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?

Daniel Swater
  • 237
  • 1
  • 6
  • 19

0 Answers0