AngularJS中ng-click和data-ng-click有什么区别？

Question

从第一眼看起来，data-ng-click似乎可以将某些数据作为参数传递给在按下按钮时应该调用的方法。

但我没有看到区别。

我已经按照代码片段进行了操作：

HTML

<input 
    type="button" 
    value="Fess"
    ng-click="toggle(2)">

OR

<input 
    type="button" 
    value="Fess"
    data-ng-click="toggle(2)">

JS

$scope.toggle = function (valueS) {
    alert(valueS);        
}

两个都可以。

谢谢，

- Maxim Shoustin

Answer 1

它们是相同的概念。你可以使用 data-ng-click 来创建一个有效的html。

- NARKOZ

---

如果你通过HTML验证器，会得到“在此处不允许在input元素上使用属性ng-click”的警告。而在HTML5中，data-ng-click是一个有效的属性。 - NARKOZ

Answer 2

从Angular指令文档中可以得知：

指令的命名采用驼峰式，例如ngBind。你可以将驼峰式名称翻译为蛇形式，加上这些特殊字符 :, -, 或 _ 来调用该指令。如果需要符合HTML验证器标准，你还可以在指令前面添加x-或data-前缀。以下是一些可能的指令名称：ng:bind、ng-bind、ng_bind、x-ng-bind和data-ng-bind。

实际上省略它们是没有问题的。只是，如果你通过html验证器服务运行代码，它将无法通过合规性测试。

- Jonah

Answer 3

HTML5具有在所有HTML元素上嵌入自定义数据属性的功能。

这些新的自定义数据属性由两部分组成：

属性名称 数据属性名称必须至少为一个字符，并且必须以"data-"为前缀。它不应包含任何大写字母。

属性值 属性值可以是任何字符串。

<li data-spacing="30cm" data-sowing-time="February to March">Celery</li>

来源： http://html5doctor.com/html5-custom-data-attributes/

HTML5自定义数据属性是一种在HTML标签中存储额外信息的方法。这些属性以"data-"为前缀，可以在JavaScript中访问和操作。

使用自定义数据属性可以方便地存储与元素相关的数据，而无需在HTML代码中添加额外的class或id。例如，可以将产品ID存储在一个data-product-id属性中，然后在JavaScript中使用该属性来获取产品信息。

自定义数据属性还可以用于与CSS样式相关的操作，例如在:hover时更改元素的背景颜色。

- Harsha

Answer 4

使用表单和不使用表单时有所不同。

当我的元素在表单中时，它们的行为是相同的。

当我在一个不在表单中的元素上使用 data-ng-click 时，点击事件并不会发生。

- Nithyanandam G