"ng-click" Not working out of "ion-content"


#1

Hi there.
I have an input box with ng-model attribute. Inside ion-content tag:

<ion-content class="padding">
  <input ng-model="myNumber" type="number" placeholder="Enter number">
</ion-content>

And in the footer-bar I have this:

<div class="bar bar-footer bar-balanced" style="background-color: #00368C !important; color: #fff;">
    <div class="title">
      <button ng-click="submit(myNumber)" class="button button-clear">Submit</button>
    </div>
</div>

The alert result is undefined.

NOTE: when I put the button inside the ion-content it works fine.
Any idea?


#2

This is how ion-content is designed to work, it gets it’s own child scope, see the docs: http://ionicframework.com/docs/api/directive/ionContent/


#3

If you want to get around this declare an object in your controller and set the model to be a property of that object. That way the directives scope will change the value by reference and all will be well. Here’s a working example: http://codepen.io/anon/pen/QNgvNx


#4

@rloui Thank you so much.