如何显示玩家上交AngularJS？

Question

这里是初级程序员。在我的控制器构造函数中，我有：

vm.turnCounter = 0;
vm.turn = getTurn();

function getTurn() {
            if (vm.turnCounter % 2 == 0) {
                return 'Player 1';
            } else {
                return 'Player 2';
            }
        }

vm 是我的捕获变量，我没有使用 $scope。我正在尝试使用 {{ctrl.turn}} 在我的视图中显示当前回合，但到目前为止 vm.turnCounter 中的更改对 {{ctrl.turn}} 没有影响，它始终显示 "Player 1"。我在这里是否遗漏了一些 Angular 数据绑定概念？谢谢。

这是整个控制器，我省略了超长 getBoards() 因为它只是一个长数组我将放入 firebase:

(function () {
    angular
        .module('APP')
        .controller('TicTacToeCtrl', TicTacToeCtrl);

    function TicTacToeCtrl() {
        var vm = this;

        vm.addPiece = addPiece;
        vm.boards = getBoards();
        vm.turnCounter = 0; //encapsulate this
        vm.turn = 'Player 1';
        vm.getTurn = getTurn();

        function addPiece(obj) {
            if (obj.p1 || obj.p2)
                obj.p1 = true;
            vm.turnCounter++;
        }

        function getTurn() {
            if (vm.turnCounter % 2 == 0) {
                return 'Player 1';
            } else {
                return 'Player 2';
            }
        }
    }
})();

Answer 1

这是一个简化的答案：http://jsfiddle.net/jd96d6kr/

为了让您的视图知道发生了什么，您将不得不使用 $scope。这就是 angular 中数据绑定的全部要点。将 var vm 更改为 $scope.vm

<body ng-app="APP">
<div ng-controller="TicTacToeCtrl">
    <button ng-click="next()">Next</button>
    turn is {{vm.turn}}
</div>

(function()
{
  angular
  .module('APP',[])
  .controller('TicTacToeCtrl', function($scope)
  {
    $scope.vm = this;
    $scope.vm.addPiece = $scope.addPiece;
    $scope.vm.turnCounter = 0;
    $scope.vm.turn = 'Player 1';

    $scope.addPiece = function(obj)
    {
      if (obj.p1 || obj.p2)
        obj.p1 = true;
      $scope.vm.turnCounter++;
    }

    $scope.getTurn = function()
    {
      console.log($scope.vm.turnCounter);
      return ($scope.vm.turnCounter % 2 == 0) ? 'Player 1' : 'Player 2';
    }

    $scope.next = function()
    {
      $scope.vm.turnCounter++;
      $scope.vm.turn = $scope.getTurn();
    }
  });
})();

我不确定 addPiece() 做了什么，所以我并没有真正做太多。

如何显示玩家上交AngularJS？

How to display player turn in AngularJS?

javascript

data-binding

angularjs