CODEWITHSUNDEEP
angularjsangularjs-components
chitzui
chitzui

Reputation: 4098

Angular Component Tag Name to div

I totally hate to add tag names based on component names in my apps. I hate to do this:

<hero-detail hero="ctrl.hero"></hero-detail>

Isn’t it possible to use normal div tags instead? Something like this?

<div id="hero-detail" data-hero="ctrl.hero"></div>

why isn’t that working?

Upvotes: 1

Views: 8453

Answers (3)

gyc
gyc

Reputation: 4360

You can technically restrict a component to an attribute as you do with directives since components are a special kind of directive. (I modified a random fiddle found on google)

EDIT: this does work on older 1.5 versions but not on newer ones. So read on...

But officially you cannot and you shouldn't do it anyway. If you choose a component architecture, you have to stick to the rules or things will get out of hands quickly.

Having components as html elements is clean and good practice. You should learn to like it.

Upvotes: 3

subash
subash

Reputation: 3140

why not, that is also possible. basically in three ways we can specify the directives. i.e Element, Attribute, Classname

but while create the directive you can specify 

restriction : AE

or whaterver you need,

then you can use like this

<div id="hero-detail" hero-detail data-hero="ctrl.hero"></div>

for more have a deep look at the docs. directives

Upvotes: 2

Dan M. CISSOKHO
Dan M. CISSOKHO

Reputation: 1065

your answer is here https://docs.angularjs.org/guide/directive

They says:

Directive types $compile can match directives based on element names, attributes, class names, as well as comments.

All of the Angular-provided directives match attribute name, tag name, comments, or class name. The following demonstrates the various ways a directive (myDir in this case) can be referenced from within a template:

  <my-dir></my-dir>
    <span my-dir="exp"></span>
    <!-- directive: my-dir exp -->
    <span class="my-dir: exp;"></span>

Best Practice: Prefer using directives via tag name and attributes over comment and class names. Doing so generally makes it easier to determine what directives a given element matches.

Best Practice: Comment directives were commonly used in places where the DOM API limits the ability to create directives that spanned multiple elements (e.g. inside elements). AngularJS 1.2 introduces ng-repeat-start and ng-repeat-end as a better solution to this problem. Developers are encouraged to use this over custom comment directives when possible.

Upvotes: 1

Related Questions