147

我已经开始了解 AngularJS，并且对ng-app和data-ng-app指令之间的区别感到困惑。

4

7 回答 7

124

这些答案中的大多数只是说使模板有效 HTML或HTML Validator Compliant，而没有解释这些术语的含义。

我不确定，但我猜这些术语适用于扫描您的代码以符合标准的 HTML 验证程序 - 有点像 lint。它们不识别ng-app为有效属性。他们希望非默认 HTML 属性以

data-attribute_name_here.

因此，创建者AngularJS为他们的指令创建了替代名称，包括data-在它们前面，以便 HTML 验证程序会“喜欢”它们。

于 2013-11-07T03:15:50.383 回答
41

就运行时行为而言，它们只是不同风格的命名指令，如下所述：http: //docs.angularjs.org/guide/directive

指令具有驼峰式名称，例如 ngBind。可以通过使用这些特殊字符 :、- 或 _ 将驼峰式名称转换为蛇形大小写来调用该指令。可选地，该指令可以以 x- 或 data- 为前缀，以使其符合 HTML 验证器。以下是一些可能的指令名称的列表：ng:bind、ng-bind、ng_bind、x-ng-bind 和 data-ng-bind。

正如您在阅读本文中所看到的，data-可用于使您的 HTML 通过 HTML 验证器测试/

于 2013-04-24T06:03:13.147 回答
6

您可以声明角度命名空间<html xmlns:ng="http://angularjs.org" ng-app>

于 2013-05-20T17:13:13.293 回答
5

在现代浏览器中没有区别，但在较旧的 IE 中，除非您声明定义它的 XML 命名空间，否则它们将无法工作。

还有一个验证差异在于ng-app不是有效的 XHTML，并且会导致您的网页无法通过 HTML 验证。Angular 允许您在其指令前面加上data-或x-允许它进行验证。

于 2013-04-24T10:35:36.273 回答
4

如果要使页面 HTML 有效，可以使用 data-ng- 而不是 ng-。
这将引发错误

<div ng-app="">

  <p>Input something in the input box:</p>
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>

</div>

这不会抛出错误

<div data-ng-app="scope" data-ng-init="name='test'">

  <p>Input something in the input box:</p>
  <p>Name: <input type="text" data-ng-model="name"></p>
  <p data-ng-bind="name"></p>

</div>
于 2016-03-17T16:12:09.063 回答
3

这两个术语的基本区别在于 data-ng-app 验证 HTML 而后者不验证。功能保持不变。如需更多参考，您可以尝试 w3Validator。

于 2017-04-04T11:54:29.553 回答
-2

两者之间绝对没有区别，除了某些 HTML5 验证器会在像 ng-app 这样的属性上抛出错误，但它们不会对任何以 data- 为前缀的东西抛出错误，比如 data-ng-app。所以在我们的角度指令中使用 data- 前缀是好的。

甚至你可以通过下面提到的方式使用角度指令 ng-bind, ng:bind, ng_bind, data-ng-bind, x-ng-bind

于 2016-07-07T07:51:20.997 回答