Question

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

<html ng-app>

或者这个：

<body ng-controller="PhoneListCtrl">

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

Answer 1

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

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

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

Answer 2

来自文档：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-作为前缀。

Answer 3

来自哪些ng- *属性来

来自主ng module。 Source code

是有效的HTML吗？

没有。但属性样式指令可以使用x-或data-作为前缀，以使其符合HTML验证器。请参阅direcives documentation。

Answer 4

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

AngularJS标签属性

4 个答案: