Angular - 无法查看工厂变量答案

【问题标题】：Angular - Cannot watch a factory variableAngular - 无法查看工厂变量
【发布时间】：2016-05-13 08:53:33
【问题描述】：

我一直在尝试让控制器的作用域识别工厂变量。

这是我的 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 的变化。有什么理论吗？

【问题讨论】：

您的问题得到解答了吗？
是的。感谢您的帮助

标签： javascript angularjs variables angularjs-scope watch

【解决方案1】：

你应该使用$rootScope.$watch

【讨论】：

【解决方案2】：

您可以通过将Game 分配给范围来简化此操作，即

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

在你的模板中...

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

这样，您根本不需要设置任何手动观察者。

【讨论】：