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}}没有影响，它始终显示＆＃34;玩家1＆＃ 34 ;.我在这里错过了一些角度数据绑定概念吗？感谢。

这里是整个控制器，我省略了超长getBoards()，因为它只是一个很长的阵列，我会放入火力基地：

(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。这是角度数据绑定的全部要点。将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中显示玩家转弯？

1 个答案: