Angular directive and css class with same name

Question

I have a situation where angular directive and css class has same name. For example

<div class="abc" > ... </div>

I this scenario "abc" is interpreted as angular directive. How can I make angular to ignore "abc" in this particular case.

Note: I can't change name of css class nor directive.

Edit:

Few more details: Here both angular directive and css class are from third party and I should not make changes in them. So is there any way without changing directive code or class name?

The answers about directive restrictive are good but maybe you should think about namespace since you clearly have an issue here ;) Cheers — maurycy
– maurycy, Commented Jun 13, 2014 at 9:35
This. A thousand times this. Use a sensible namespace for your directives, there's a good reason it's ng-click and not click. Pick a prefix for your directves (and make sure it's not ng-). — ivarni
– ivarni, Commented Jun 13, 2014 at 10:02
I think what you really want -not chaging the css nor the directive- is not possible. You should go for one of the many options already mentioned. — Martijn
– Martijn, Commented Jun 13, 2014 at 10:16
@Martijn : That's what I wanted to know. Whether is there some sort of escape character which says don't consider this class as directive. Some thing like class="@abc" or ng-class="abc". — Pavan Kumar
– Pavan Kumar, Commented Jun 13, 2014 at 11:43

Ilan Frumer · Accepted Answer · 2014-06-13 09:24:57Z

3

by default angular directives only apply to attributes.

If your directive already has a property of { restrict: "C" } just remove it.

From angular $compile docs:

restrict

String of subset of EACM which restricts the directive to a specific directive declaration style. If omitted, the default (attributes only) is used.

E - Element name:

A - Attribute (default):

C - Class:

M - Comment:

Create a terminal directive

If you cannot change the name of css class nor directive maybe you can create a terminal directive with a higher priority on the same element.

.directive('stop', function() {
  return {
    priority: 2000,
    terminal: true
  }
});

Markup:

<div stop class="abc" > ... </div>

This would not work if there are any child element directives that needs to be compiled.

edited Jun 13, 2014 at 9:24

answered Jun 13, 2014 at 9:17

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Miraage · Accepted Answer · 2014-06-13 09:26:15Z

0

Read the docs...

.directive('abc', function() {
    return {
        restrict: 'A'
    };
});

answered Jun 13, 2014 at 9:26

Miraage

3,4943 gold badges28 silver badges43 bronze badges

Collectives™ on Stack Overflow

Angular directive and css class with same name

2 Answers 2

restrict

Create a terminal directive

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

restrict

Create a terminal directive

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related