Howto have clickable icon in radio-item

I need a clickable item in a radio-item. I tweaked a bit css and the icon is displayd but it is not clickable. If I click on the icon the radio is selected.
Any suggestion this???

Got a codepen I could look at?

@mhartington Here is a codepen of my issue.

Click on PLUS to open a modal. within this modal I have a list with some radio-items. You can click the radios to fir the ng-click functions. But it’s not possible to click on the button in teh radio-item. This will fore also the mg-click function of the radio.

PS I tweeked a bit css to put the checkmark at the left. In my app I have the content of shifted to the right to align with other items in the list. In my app I also did something to remove the >. I cant find how.

Most important is how to respond to the button tap.

@mhartington The embedded codepen above doesnt work. Hers is the direct link

enter link description here

So by default, the ionRadio isn’t setup for this, but we can easily extend it.

  .directive('mhRadio', function(ionRadioDirective) {
  return angular.extend({}, ionRadioDirective[0], {
    template:'<label class="item item-radio">' +
    '<input type="radio" name="radio-group">' +
    '<div class="item-content disable-pointer-events" ng-transclude></div>' +
    '<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>' +

So now we can extend the directive at a lower level and change it, add to it, remove, etc.

This should get you in the right direction.

@mhartington Hi Mike, thank you for your service
I never used a custom directive. But I sure want to learn it.
In your codepen I see you added a mhRadio-item in the list. Allthough you used the mhRadio directive this radio behaves like the other radios, right.
How do we extend mhRadio to make it respond to the ion-ios7-information-outline.
I bet there must be some more added to the template of mhRadio to achieve that.
Do I have to put the button in the directive somewhere??

1 Like

I need the same and the suggested codepen is not working.
Any idea?

1 Like