Ng-click wrapped by <label> doesn't work when migrated from beta.8 to beta.11

ionic-v1
1

Hello,

I have following DOM structure:

 <ion-content>
      <label >
           <div > 
               <a class="item" ng-href="" ng-click="onDateSampleClick()">                      
                      Press me
               </a>                
           </div>              
      </label>
  </ion-content>

For 1.0.0.beta.11 ng-click directive doesn’t work.

When I use 1.0.0.beta.8, the onDateSampleClick is works properly.

For beta.11 I need remove <label>:

 <ion-content>     
           <div > 
               <a class="item" ng-href="" ng-click="onDateSampleClick()">                      
                      Press me
               </a>                
           </div> 
  </ion-content>

See Demo. (It configured to beta.11) , change it to beta.8 to show alert on click.

[EDIT]

Stopped to work in beta.9

Any suggestions?

2

I know it sounds stupid, but can you create a codepen or jsfiddle to reproduce the issue?
I’ll subscribe to this topic and get notified when you post so I can try and help!

At a first glance I can only see

class="item  ng-show="showHourScroll"

where the class attribute doube quote is not closed, but it’d be too easy if that were the issue :smiley:

3

I added the Demo that demonstrates the issue.

Thanks,

4

Thanks for the codepen.

Simply removing the <label> element that wraps your <a> is making things work fine, so I assume there is some mechanism (likely a directive) that intercepts click events on labels and stops their propagation.
I’ll try to find out more but, in the meantime, I guess you can just replace the <label> with another element and have your code working

5

Spent 2h struggling to make an ng-click on a button within a directive call a function from the controller. After refactoring everything, changing scope types, testing with onclick in different ways, etc I found out that my button was the child of a label which was stealing clicks :angry:
Replaced label with div and everything works like a charm!

using v1.0.0-beta.14

1 Like
6

History of my last hours… kind of unbelievable =(

7

I also meet the same problem. Does anyone know why does this happen. It’s a bug or the Ionic team do this on purpose?

8

I have the same issue with ng-click inside of a label, e.g.

<label>
    <input type="text" ng-model="someText"><a ng-click="clearText()">clear the input</a>
</label>

clearText() is never invoked when clicking “clear the input”. However, if I replace label with div, it works.