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

ionic-v1
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/

1 Like
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

1 Like
4

@rloui Thank you so much.

5

Does this method work between controllers?

I need to have a div pinned to the top. But the buttons/inputs in that div need to pass data to another controller? Should I just use $rootScope variables in that case or is there another method?

Does Ionic v1 have a method to pin a div to the top of the screen - I see in other threads methods like ion-fixed but I think thats specific to Ionic 3x and higher. Not certain though. This would all be a lot easier if there was a v1 method to pin a div.