ng-click 在所有元素上添加一个类，而不仅仅是一个

Question

我有一个使用以下代码创建的矩阵：

<div class="cell-container" ng-repeat="cell in field">
    <div ng-repeat="cols in cell track by $index" class="cell" ng-click="selectShip(cols)" ng-class="{ selected: !cols.empty }">
        {{ $parent.$index }} {{ $index }} 
    </div>
</div>

在指令中我有一个函数，当点击时应该改变对象值并向点击的元素添加一个类

scope: {
    field: '=',
    type: '@'
},
link: function($scope) {
    $scope.selectShip = function(item) {
        if ( item.empty === true ) {
            item.empty = false;
        } else {
            item.empty = true;
        }
    }
}

问题是当我点击内部 ng-repeat 中的一个 div 时，它会更改对象值并在所有 div 上添加一个类，而不仅仅是被点击的那个。

我做错了什么？

Answer 1

一定是因为你在使用$scope。相反，您应该使用隔离范围为创建的所有指令元素提供单独的范围。 默认情况下，角度中的指令继承父范围。 你可以在这里找到一些帮助 - How to create an isolate scope