Javascript 如何在不使用jquery的情况下使用angular在div中添加内容

我正在尝试在angular 1中创建一个基本的井字游戏。当我点击一个正方形时，我想根据旋转角度添加X或O。我不知道该怎么做。我可以在jquery中完成，但我想在angular中完成

<div class="squares-container" ng-repeat="square in squares">
  <div class="s" id="{{ $index + 1 }}" ng-click="move(square)", ng-bind="{{ $index + 1 }}"></div>
</div>

angular
.module('app')
.directive('ticTacToe', function(){
    return {
      restrict: 'E',
      templateUrl: 'tic-tac-toe.html',
      controller: controller

    };

    function controller($scope){
        function init() {
            let turn = 0;
            let currentPiece = 'X';

            $scope.squares = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            $scope.move = function(id){
                currentPiece = turn % 2 === 0 ? 'X' : 'O';
                $scope.id = currentPiece;
                turn++;  
            };
        }
        init();
    }
})

---

这是密码

您可以将正方形设置为对象，只需更改它们的属性即可

当你点击一个正方形时，将其传递给你的移动函数，找到它的索引，并更改该正方形的piece属性

作用{ "严格使用",； 模块'app'，[]； }; 作用{ "严格使用",； 角度。模块'app'。指令'ticTacToe'，ticTacToe指令； 功能指令{ 返回{ 限制：'E'， templateUrl:'tic tac toe.html'， 控制器：TictoeController， controllerAs:“TicTacToeCtrl” }; } TicTacToeController.$inject=[]； 功能控制器{ //引用此项，使其在视图中可用，并使用控制器作为语法 var vm=这个； //向视图公开我们的移动函数 vm.move=move； //我们甚至可以公开我们的newGame函数来开始一个新游戏 vm.newGame=newGame； //设置默认值-我们将向该控制器添加转向，以便在视图中显示它 vm.turn=0； var currentPiece=X； //开始新游戏 新游戏； 函数movesquare{ //获取传入的平方的索引 var指数=vm.squares.indexOfsquare； //如果没有一个集，请将“方形块”属性设置为正确的块 如果！vm.squares[索引].块{ vm.squares[index].piece=vm.turn%2===0？'X'：'O'； //增加圈数 vm.turn++； } } 函数newGame{ //复位圈 vm.turn=0； //重置当前工件 电流片=X； //布置我们的广场 vm.squares=[{ id:1， 单件：空 }, { id:2， 单件：空 }, { id:3， 单件：空 }, { id:4， 单件：空 }, { id:5， 单件：空 }, { id:6， 单件：空 }, { id:7， 单件：空 }, { id:8， 单件：空 }, { id:9， 单件：空 } ]; } } }; /*风格就在这里*/ .集装箱{ 背景色：14bdac； } s{ 边框：1px000； 宽度：50px； 高度：50px； 浮动：左； } .分隔器{ 显示：块； 明确：两者皆有； } 新游戏轮换：{{TicTacToeCtrl.turn} {{：：square.id} {{square.piece}

---

嘿，我关注你的所有更新，它们都是有意义的，但是javascript自动函数执行的意义是什么？请参阅AngularJS团队认可的AngularStyle指南的y010部分：明白了。还有，如果你没有通过任何东西，为什么要使用.$inject？好的，知道了。最后一个问题。。。我该如何设计它，使它看起来像一个井字游戏？这是一个棘手的问题，因为它是在一个重复中，我们不应该在注释中讨论更多，但是作为一个提示，使用CSS类和指令，在$index/square.id上使用模运算符来获得你的3。或者使用Or指令和模数运算符添加div以包含行。