移动设备上具有ng-class的离子图标中间状态会改变其颜色

Question

我实现了一个pin / unpin按钮，可以实时更新数据库（使用带有angularfire的firebase）。

HTML代码如下：

<a class="button button-icon energized icon"
        ng-class="{'ion-ios-star-outline': !isPinned, 'ion-ios-star': isPinned}"
        ng-click="doUpdatePinForUid(user.auth.uid, !isPinned)"></a>

isPinned变量与DB中的值同步。

这在我的浏览器中非常有效，但是当我在iOS上模拟应用程序时，图标从大纲到普通的更改会通过显示为灰色的中间状态...

1. 用户没有固定：明星是大纲并且充满活力
2. 我点击按钮，我的用户被固定：星是普通和灰色（但它应该通电;在不在iOS的浏览器中工作）
3. 我必须单击按钮外部（在视图的空白处），以便按钮通电（仅限iOS）

我试图调试它，灰色似乎出现了，因为按钮与ng-class一起经历了不同的状态：

• 离子IOS星级除去活性
• 离子IOS星级添加
• 离子IOS星级添加活性
• ...

有关信息，我尝试通过在$ timeout中包围它来更新控制器中的isPinned变量，因为我最初虽然它与摘要周期有关，但没有。

任何帮助或建议？