ng-Klick fügt eine Klasse auf alle Elemente anstelle von nur einem

Question

Ich habe eine Matrix mit dem folgenden Code erstellt:

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

Innerhalb der Richtlinie I eine Funktion haben, dass, wenn darauf geklickt sollte den Objektwert ändern und hinzufügen eine Klasse für das Klickelement

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

Das Problem ist, dass, wenn ich in der inneren ng-Wiederholung auf einem div klicken, wird der Objektwert ändert und fügt eine Klasse auf allen divs, nicht nur angeklickten ein.

Was mache ich falsch?

Answer 1

Es muss sein, weil Sie $scope verwenden. Stattdessen sollten Sie einen isolierten Bereich verwenden, um einen separaten Bereich für alle erstellten Richtlinienelemente zu erhalten. Direktiven in angular erben standardmäßig den übergeordneten Bereich. Sie können hier Hilfe finden - How to create an isolate scope