Angular - 無法觀察工廠變量

Question

我一直試圖讓控制器的范圍識別工廠變量。

這是我的index.html

<div ng-controller='scoresController'>
    <div id='game-info' ng-hide='!playing'>
        <p id='level'>Level: {{ level }}
            <span id='score'>Score: {{ score }}</span>
            <span id='high-score'>High Score: {{ highScore() }}</span>
            <span id='coins'>Coins: <span class='coins-badge'> {{ coins }} </span></span>
        </p>
    </div>
</div>

這是我的工廠

angular.module('my-app')
    .factory('Game', function() {
        return { 
            level: 1,
            score: 0,
            playing: false,
            coins: localStorage['snakeCoins']
        };
    });

這是我的帶有$watch功能的控制器

angular.module('my-app')
.controller('scoresController', ['$scope', 'Game', function($scope, Game) {

    $scope.score = Game.score;
    $scope.level = Game.level;
    $scope.playing = false;
    //$scope.coins = localStorage['snakeCoins'];

    // Why aren't the changes being registered?
    $scope.$watch(function() {
        return Game.playing;
        }, function(newVal, oldVal) {
        $scope.playing = newVal;
    }, true);

    $scope.$watch(function() {
        return Game.score;
        }, function(newScore, oldScore) {
        if (newScore > oldScore) {
            console.log(newScore);
            $scope.score = newScore;
        }
    });

    $scope.$watch(function() {
        return Game.level;
        }, function(newLevel, oldLevel) {
        if (newLevel > oldLevel) {
            $scope.level = newLevel;
        }
    });

但是，我知道工廠變量正在改變，因為我正在將結果記錄到控制台

$scope.incrementScore = function() {
        if (!playing) {
            if (apple['x'] == snake[0].x && apple['y'] == snake[0].y) {
                Game.score++;
                console.log(Game.score);      //Logging here
                $scope.incrementLevel();
                $scope.generateApples();
                $scope.drawApple(apple['x'], apple['y']);
                snake.push({ x: snake.length, y: 0 });

            }
        }
    }

它不能是我包含文件的順序。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js'></script>
<script src='scripts/data.js'></script>
<script src='scripts/app.js'></script>
<script src='scripts/services/game.js'></script>
<script src='scripts/controllers/navController.js'></script>
<script src='scripts/controllers/achievementsController.js'></script>
<script src='scripts/controllers/scoresController.js'></script>
<script src='scripts/controllers/gamesController.js'></script>

不確定，為什么我不能注意到$watch的變化。 任何理論？

Answer 1

你應該使用$rootScope.$watch

Answer 2

你可以通過將Game分配到范圍來簡化這一點，即

.controller('scoresController', function($scope, Game) {
    $scope.game = Game;

在你的模板中......

<span id="score">Score: {{ game.score }}</span>

這樣，您根本不需要設置任何手動監視器。