使用适用于移动设备的angular创建checkbox指令

Question

对于我目前正在处理的项目，我需要拥有常规复选框元素不支持的样式。

为了解决这个问题，我创建了一个角度指令，用于重新创建复选框功能。虽然这对我有用，但我确实怀疑我使用了正确的html标记，因为我对自己所拥有的东西感觉不对。

传统上，您可以使用带有标签的复选框：

<label>
  <input type="checkbox" /> Click to check
</label>

点击标签，然后切换复选框。

由于我想用棱角分享复制这个功能，我已经敲了一个演示版here，我相信这样做但我不知道我是否遗漏了一些东西？我想值得一提的是，屏幕阅读器不是这个项目的问题。我还考虑了这可能会如何在移动设备上呈现，但由于它只是一个复选框，它应该可以正常工作。

我是否正确地接近了这一点，或者我在这里做了一些可怕的错误？

Answer 1

我认为你不需要你在指令中定义的范围变量。

  

{elementId：＆＃39; @＆＃39;，isChecked：＆＃39; =？＆＃39;}

顺便说一句，你想要告诉那些＆＃39; =？＆＃39; ？实际上它是'typeOfVariableConnection＆＃39; +＆＃39; attributeName＆＃39;。所以按照你的方式，它应该接受名为＆＃39;？＆＃39;的属性的双向绑定。我不认为HTML规范允许这样的属性名称。

但是你需要my-checkbox指令之外的复选框值，所以最好将一些范围变量传递给该指令，以便访问它的值。控制器。

我已经更改了一下plunker，连接了原生复选框和你自己的相同模型值。 http://plnkr.co/edit/bJF1uggJjksiRT7Zkj9M?p=preview