CODEWITHSUNDEEP
cssangularjsangularjs-directive
dreamer
dreamer

Reputation: 901

How to pass in different classes to a element directive

I have an element directive, which is to be reused.
But the background-color needs to be changed according to the usage.
Hence a class needs to be injected dynamically into the directive, each time the directive is called.

directive name is tabset

tabset template:

<ul>
  ........ HTML STUFF .......
</ul>

It is to this <ul> tag that I need to add classes.

I would prefer an answer on lines of creating an attribute directive which can be passed onto the tabset directive. Something like shown below:

1st example

<tabset colorblack>
</tabset>

2nd example

<tabset colororange>
</tabset>

where colorblack and colororange would be the attribute directives.

If something like this is not posiible, then do suggest the proper answers

And please note:
Eventhough i have mentioned about changing colors, when it comes to real time, it is not just changing colors, so i definitely need to pass in class.
 DO let me know in case the question is not clear.Thanks in advance

Upvotes: 3

Views: 2708

Answers (1)

Omri Aharon
Omri Aharon

Reputation: 17064

It's actually quite simple, and you really really don't need a directive for that.

You do:

<tabset tab-class="colorblack">
</tabset>

And in your directive (assuming isolated scope):

scope: {
    tabClass: "@"
}

And in your HTML:

<ul class="{{tabClass}}">
   ....
</ul>

Upvotes: 5

Related Questions