CODEWITHSUNDEEP
angularjsangularjs-directive
Pavan Kumar
Pavan Kumar

Reputation: 1881

Angular directive and css class with same name

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?

Upvotes: 1

Views: 695

Answers (2)

Miraage
Miraage

Reputation: 3464

Read the docs...

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

Upvotes: 0

Ilan Frumer
Ilan Frumer

Reputation: 32357

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.

Upvotes: 3

Related Questions