How to use AngularJS without custom HTML tags?

Question

I’m trying to use UI Bootstrap’s inline datepicker, but it works with a custom tag:

<datepicker ng-model="dt" min-date="minDate"></datepicker>

My template processor doesn’t support custom tags, is there a way to have this working with a standard tag, e.g. something like <div ng-something="datepicker"></div>?

There have been discussions on how/why AngularJS uses custom tags here and here, and AngularJS has some doc on how make IE8 accept custom tags using JS, but my problem is at the HTML generation step, i.e. it’s not a problem with the browser.

Note that I can’t change my template processor, and this question is larger than that since you have to use standard tags if you want to have a W3C-compliant HTML. AngularJS lets you use standard attributes (by prepending data-), but I can’t find a way to use standard tags.

Answer 1

You may try something along these lines:

<div data-datepicker ng-model="dt" min-date="minDate"></div>

EDIT: It should work, as the datepicker directive from ui-bootstrap (https://github.com/angular-ui/bootstrap/blob/master/src/datepicker/datepicker.js) seems to have restrict attribute set to 'EA', which means, that you can use it by Element or Attribute. So I think you're good to go with my example provided above.