[SOLVED] Change view clicking on a ion-option-button

ionic-v1
1

Hi there,
i have a view with a list of item based on ion-item(s).
Inside the item i put a button and a ion-option-button (normally hide).
In both of them I inserted the ng-click directive: clicking them I’d like to change the content inside the same view (changing the .state).
What happen is that:

  • if i click the , it doesn’t work the ng-click but the href of the parent (ion-item)
  • if i show the ion-option-button then I don’t know how to change the state

Can anybody help me with both?
Thanks

2

Not sure I understand your question but have a look at my answer on topic which seems to be similar:

3

This is because you’re not preventing event propagation. A button is clicked but also a list element below.

When you click on a button and call some function immediately execute this:

Read also this so you can understand what’s event propagation and what’s event bubbling.

4

I reply after some time …

I added code to prevent the event bubbling but no way to stop it :frowning:

  <ion-item class="item-remove-animate item-icon-right item-button-right" 
	ng-repeat="custo in customers" type="item-text-wrap" href="#/tab/customers/{{custo['customerId']}}">
    <span style='font-size:170%; color:blue'>{{$index+1}}</span>
  <span>Client: <b>{{custo["clientString"]}}</b></span>
  <span>id: <b>{{custo["customerId"]}}</b> - Nome contatto: '<b>{{custo["contact"]}}</b>' </span>
  <button class="button button-calm" ion-stop-event="click" ng-click="license(custo[':customerId'], $event); $event.stopPropagation(); ">
      License        </button>

and also in the controller code:

$scope.license = function(id, $event){
 console.log('CustomersCtrl.license customerId:'+id);
 $state.go('tab.licenses', { currentCustId:id } );
 if ($event)$event.stopPropagation();
};

Where I’m doing wrong???

5

I solved !
I also used the ng-click event for the ion-item tag! (instead of href=’…)