binding a css class to a element via angular directive

Question

I want to attach a directive to a element. The directive will be responsible for the following: 1. Attach a click event to the element 2. Upon click.. show a drop-down

In order to perform the first activity I have added directive called "sortDirective" to my element below:

<span class="glyphicon glyphicon-arrow-down" style="font-size:0.6em" sort-directive></span>

This is done in the file layout.html

I am facing two issues: 1. the click event is not working 2. the drop-down should be shown only on click event. Right now you will notice that the drop-down (blue in color) is being shown at all the times.

I believe i am missing something here since my directive sort-directive is falling within another directive custom-table. Am I thinking in the right direction or am I totally off ?

Plnkr Here

Community · Accepted Answer · 2017-05-23 11:49:48Z

0

I wouldn't call the click event with the directive. My advice would be just to put ng-click to the span that you want to call the function from (and move the function to the controller). You might want to look at this thread: trigger click event from angularjs directive

Also a quick css tip - add these rules

cursor:pointer;
padding:0 0 0 5px;

to the class .header-cells. Finally, don't you think that the arrow is too small to click it? Try binding the click event to the whole container.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Feb 10, 2014 at 22:06

bbahov

1097 bronze badges

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

Comments

runtimeZero · Accepted Answer · 2014-02-10 22:51:34Z

0

i finally managed to lay this out. Those interested in seeing how it is done ..here is a plnkr

http://plnkr.co/edit/TG6aCEu2TgPq28Jcj0nM?p=info

just click on any of the headers (in orange) and you should see the results.

answered Feb 10, 2014 at 22:51

runtimeZero

28.4k28 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

binding a css class to a element via angular directive

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related