57

我正在学习 AngularJS 并看到它添加了一些自己的属性，这些属性既不是以数据开头，也不是标准的 html 标签属性，如下所示：

<html ng-app>

或这个：

<body ng-controller="PhoneListCtrl">

这些 ng-* 属性是从哪里来的，这是一个有效的 HTML 吗？我在哪里可以阅读更多关于此的信息？

4

4 回答 4

51

严格来说，这些额外的属性没有在 HTML 规范中定义，因此不是有效的 HTML。你可以说 AngularJS 提供并解析 HTML 规范的超集。

但是，从 v1.0.0rc1 开始，您可以使用 data-* 属性，例如<html data-ng-app>，我相信它是有效的 HTML5。来源。

AngularJS 编译器有一个指南，其中包含有关该过程的更多信息。简而言之; AngularJS 编译器读取您的 HTML 页面，使用这些属性来指导它在加载后通过 javascript 和 HTML DOM 编辑和更新您的页面。

于 2012-08-24T10:49:35.813 回答
27

来自文档：http ://docs.angularjs.org/guide/directive

<!doctype html>
<html data-ng-app>
  <head>
    <script src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div data-ng-controller="Ctrl1">
      These are all valid directive declarations:<br/>
      <input ng-model='name'> <hr/>
      <span ng:bind="name"></span> <br/>
      <span ng_bind="name"></span> <br/>
      <span ng-bind="name"></span> <br/>          
      <span x-ng-bind="name"></span> <br/>
      <span data-ng-bind="name"></span> <br/>
    </div>
  </body>
</html>

我最喜欢这个data-*whatever*声明，因为它符合 HTML5。

因此，对于我的任何 Angular 声明（例如ng-controller、ng-app等ng-repeat）或自定义指令，我总是会在它们前面加上data-.

于 2013-03-10T00:39:49.943 回答
8

这些 ng-* 属性从何而来

来自主ng 模块。源代码。

那是一个有效的 HTML 吗？

不可以。但是属性样式指令可以以 x- 或 data- 为前缀，以使其符合 HTML 验证器。请参阅指令文档。

于 2012-08-24T10:55:56.907 回答
-1

另一种选择是忽略未定义的属性名称。如果您使用的是 Eclipse，则可以通过转到 project 来设置它properties>>validation>>html syntax>>attributes>>ignore undefined attribute names。

于 2014-09-30T01:33:54.380 回答