Javascript 如何在AngularJS中显示玩家回合？_Javascript_Angularjs_Data Binding

Javascript 如何在AngularJS中显示玩家回合？

javascript angularjs data-binding

Javascript 如何在AngularJS中显示玩家回合？,javascript,angularjs,data-binding,Javascript,Angularjs,Data Binding,初学者程序员在这里。在我的控制器构造函数中，我有： vm.turnCounter = 0; vm.turn = getTurn(); function getTurn() { if (vm.turnCounter % 2 == 0) { return 'Player 1'; } else { return 'Player 2'; } } vm

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

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”。我是否遗漏了一些角度数据绑定的概念？谢谢

这是整个控制器，我省略了超长的

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';
            }
        }
    }
})();

以下是一个简单的答案：

为了让视图知道发生了什么，您必须使用

$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>

我不确定

addPiece（）

做了什么，所以我没有做太多的工作。

如果希望视图能够访问$scope，那么需要使用$scope。发布你的完整控制器代码谢谢，我刚刚发布了我的完整控制器。什么是

vm

，为什么你不想使用$scope？非常感谢Ronnie，效果很好！我用$scope学习了Angular，但我正在按照这里的建议进行转换：谢谢你的帮助！该指南的哪一部分建议不要使用范围？ctrl-f有什么用？“controllerAs视图语法”将找到它。我最终在没有$scope的情况下解决了这个问题，但是当调用控制器构造函数时，它会调用我的函数来更改为player 2。小问题，没什么大不了的。有意思。我没有见过这样做，但我可以看到它在某些情况下是多么有用

(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();
    }
  });
})();