使用AngularJS高效处理多个HTML元素

假设我的视图中有一个4

div

标记：

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>

---

然而，在AngularJS的世界里，我将如何做到这一点？我是否将此代码粘贴到控制器中，并使其相对于

$scope

？或者我会创建一个

指令

并将其绑定到每个tile元素吗？

假设您的界面中不会只有4个随机tile未绑定到某种模型，您可以执行以下操作：

HTML

---

编辑：可能有10种不同的方法。如果您不想弄乱您的模型，您可以在$scope中存储一个单独的数组，并通过说

ng class=“CalculatileClass（tile）”

实时计算类，类似于我在最初的回答中所做的：

这些div标记是静态的还是使用ng repeat创建的？这有什么关系？它们将具有相同的类，因此可以静态或动态创建它们；但是它们都在同一个父标记中。啊，这里你把逻辑放在

$scope

控制器vs指令中；为什么？如果我想将相同的逻辑应用于相同的框模式，但应用程序的不同部分，该怎么办？指令不是更有意义吗？当然，如果您打算重用一组元素或某个范例，将其放在指令中是一种方法。我只是在说明完成任务的“角度方法”。假设您有某种结构（数组）来包装它，它应该很容易转换为指令。因此，这里的问题是控制器绑定到父级

$scope

，并且分片存在于其中；但是，作为一个

指令

我是否必须将作用域应用于父元素而不是子tile？不完全确定您在问什么，以下是与指令相同的代码：。父作用域仍然被修改（以添加类属性），但您可以将其隐藏在不同的变量中，以避免修改模型。同样，这个问题的正确答案实际上取决于了解您的所有需求以及UI将如何流动。我只是举例说明一个基本的例子，说明如何在角度上实现这一点。

var tiles = $('.tile');

tiles.click(function()
{
  tiles.css('background', 'red');
});

<div ng-app ng-controller="x">
    <div ng-repeat="tile in tiles" ng-click="selectTile(tile)" ng-class="tile.class">{{tile.name}}</div>
</div>

function x($scope) {
    $scope.selectedTileIndex = null;

    $scope.tiles = [
        {id: 1, name: 'tile 1'},
        {id: 2, name: 'tile 2'},
        {id: 3, name: 'tile 3'},
        {id: 4, name: 'tile 4'}
    ];

    // provide default class to all tiles
    angular.forEach($scope.tiles, function (tile) {
        tile.class = 'tile';
    });

    $scope.selectTile = function (clickedTile) {
        angular.forEach($scope.tiles, function (tile) {
            tile.class = 'tileNotSelected';
        });

        clickedTile.class = 'tileSelected';
    }
}