0

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

NotARobot
  • 978
  • 2
  • 14
  • 36
runtimeZero
  • 26,466
  • 27
  • 73
  • 126

2 Answers2

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.

Community
  • 1
  • 1
bbahov
  • 109
  • 7
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.

runtimeZero
  • 26,466
  • 27
  • 73
  • 126