• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Query regarding custom attributes in AngularJS

 
Ranch Hand
Posts: 165
Tomcat Server Java Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,

I'm new to AngularJS. May I know whether there is any impact of using custom attributes of AngularJS in data on view (HTML).
For instance,

Here, ng-reply is a custom attribute of AngularJS. Why we are using it? Will it have any change in appearance on data in view/HTML?

Kindly advise.

Thank you,
Regards,
Vinod
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
There is no AngularJS attribute ng-reply. If it is a custom attribute for your application, it should be prefixed by data- not ng-.
 
Vinod Vijay
Ranch Hand
Posts: 165
Tomcat Server Java Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:There is no AngularJS attribute ng-reply. If it is a custom attribute for your application, it should be prefixed by data- not ng-.



I think data-reply is strictly HTML 5 standard attribute. However in AngularJS, attribute can be written like data-ng-reply or just ng-reply both are fine. But what about custom attribute ng-reply in AngularJS?


Thanks
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Regardless of whether you are using AngularJS or not, HTML5 is still HTML5. So custom attributes should start with data-.

And as I said, there is no ng-reply attribute in AngularJS.
 
Bartender
Posts: 2968
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Vinod Vijay wrote:I think data-reply is strictly HTML 5 standard attribute.


... in as far as it is legal/valid HTML 5 goes yes ...

Vinod Vijay wrote:However in AngularJS, attribute can be written like data-ng-reply or just ng-reply both are fine.


...in as far as AngularJS goes, yes - that is AngularJS can access it. But using attribute names like ng-app, ng-controller etc. makes your HTML 5 invalid. The majority of HTML that utilizes AngularJS has a blatant disregard for the HTML 5 specification (3.2.5.8 Embedding custom non-visible data with the data-* attributes and MDN: data-*) and HTML 5 validators would fail it. AngularJS abuses the fact that even attributes that are not valid HTML are still marshalled into the Document Object Model (DOM) via Element.attributes. The legitimate data-* attributes are (also) more conveniently accessibly via HTMLElement.dataset:


hello Vinod Vijay

HTML using AngularJS that has to pass an HTML 5 validator cannot use the common ng-app, ng-controller, etc. attributes - it has to use data-ng-app, data-ng-controller - AngularJS will still work.

Vinod Vijay wrote:But what about custom attribute ng-reply in AngularJS?


Out of the box AngularJS doesn't recognize an ng-reply attribute. However due to the operation of the Attributes Object the value of an attribute named either ng:reply, ng-reply, data-ng-reply, or x-ng-reply would be available to AngularJS code under the name ngReply - this can be used for example in the code for an AngularJS directive.

That being said AngularJS: Developer Guide: Directives - Creating Directives:

AngularJS: Developer Guide: Directives wrote:
Best Practice: In order to avoid collisions with some future standard, it's best to prefix your own directive names. For instance, if you created a <carousel> directive, it would be problematic if HTML7 introduced the same element. A two or three letter prefix (e.g. btfCarousel) works well. Similarly, do not prefix your own directives with ng or they might conflict with directives included in a future version of Angular.


While this best practice addresses directive names, it is also understood to extend to attribute names, i.e. don't use ng:*, ng-*, data-ng-*, or x-ng-* prefixes on your own attributes.
 
Consider Paul's rocket mass heater.
reply
    Bookmark Topic Watch Topic
  • New Topic