Angular中的图像作为复选框

【问题标题】：Image as checkbox in AngularAngular中的图像作为复选框
【发布时间】：2014-08-11 10:41:57
【问题描述】：

我将在 Angular 中实现一个元素，它能够为隐藏字段设置一个值并在鼠标单击时更改元素的状态。很快，我需要一个行为类似于复选框的图像。为了实现这个元素，我决定制作一个 Angular “指令”。但是当我更改容器选择状态的值时，'selected' 类不会添加到容器中。如何使用 Angular 以正确的方式做到这一点？

我也不知道如何更新输入的值，在这里选择什么技术。请注意，隐藏字段的初始状态来自服务器端。

这是问题的演示：demo。

【问题讨论】：

标签： image angularjs checkbox input

【解决方案1】：

我更新了plunker。出现了三个小错误：

.selected 的 CSS 类缺少边框的 solid 属性。

你需要在你的指令点击监听器中调用$apply来更新作用域：

el.on('click', function() {
  scope.isSelected = !scope.isSelected;
  scope.$apply();
});

你以错误的顺序使用了 ng-class：
```
ng-class="{selected: isSelected}"
```

【讨论】：