AngularJS tags attributes

Solution 1:

Strictly speaking these extra attributes are not defined in the HTML specifications thus, are not valid HTML. You could say that AngularJS provides and parses a superset of the HTML specification.

However, as of v1.0.0rc1, you could use data-* attributes, for example <html data-ng-app> which, I believe, are valid HTML5. Source.

There is a guide to the AngularJS Compiler that contains some more information on the process. In short; the AngularJS compiler reads your HTML page, using these attributes to guide it as it edits and updates your page, after loading, via javascript and the HTML DOM.

Solution 2:

From the docs: 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>

I like the data-*whatever* declaration the best as it's HTML5 compliant.

So for any of my Angular declaration (e.g. ng-controller, ng-app, ng-repeat etc) or custom directives I'll always prefix them with data-.

AngularJS tags attributes

Solution 1:

Solution 2:

Related

Recent Posts