ngClick切換類正在影響所有元素

Question

我有一組元素，點擊時應該切換一個類。我遇到的問題是，當單擊其中一個元素時，所有元素都會收到切換的類。

<div layout="row" layout-align="space-between center" class="editor-row"> 

<div flex="initial"> 
    <div class="gradient-btn" ng-click="toggle.state = !toggle.state" ng-class="{'focus' : toggle.state}"> 
     <md-checkbox ng-model="data.fontStyle.bold" aria-label="Bold" entersubmit="ok()">Bold</md-checkbox> 
    </div> 
</div> 

<div flex="initial"> 
    <div class="gradient-btn" ng-click="toggle.state = !toggle.state" ng-class="{'focus' : toggle.state}"> 
     <md-checkbox ng-model="data.fontStyle.italic" aria-label="Italic" entersubmit="ok()">Italic</md-checkbox> 
    </div> 
</div> 

<div flex="initial"> 
    <div class="gradient-btn" ng-click="toggle.state = !toggle.state" ng-class="{'focus' : toggle.state}"> 
     <md-checkbox ng-model="data.fontStyle.shadow" aria-label="Shadow" entersubmit="ok()">Shadow</md-checkbox> 
    </div> 
</div> 

Answer 1

它們都在相同的範圍，因此toggle.state變量是相同的。

變化：toggleBold.state，toggleItalic.state，...

Answer 2

所有元素的引用相同的toggle.state

當你點擊第一個，toggle.state變量變化並且所有具有ng-class="{'focus' : toggle.state}"的元素都會受到影響。