A data model in ion-content doesn't seem to be binded to itself in ion-footer-bar


When we type text in input box, it can reflect in paragraph within ion-content. But outside the ion-content it doesn’t get reflected. For example, footer bar is outside the ion-content. So, input variable is not being reflected in footer bar. Does anyone know how to bind the variable outside the scope of ion-content?

Codepen: http://codepen.io/anon/pen/xmEJl


Please use model-binding only on an object.
Like “$scope.myForm = {‘myInput’: ‘test’}”

Example at codepen


Thanks for your reply. I knew that the logic of using a data model should work anywhere, but it was not the case to work. Could you please tell me why it didn’t work and it needed to go one level below to make it work (that is, declare the attribute under an object).


It depends how angularjs works.
In your case the ion-content is a ionic-directive -> if this directive has an own scope your are working on that scope on your input.
So if you write something in the input field -> the scope variable ist created for the directive!, because it does not exist before there.

If you are using an object -> the values are taken from the parent scope ;). It is something like scope-inheritence.
In this moment you are trying to access an object and an object key, that does not exist on the directive scope -> then there is a lookup to the parent-scopes.

Keep in mind:
Any custom-tags are directives!
So for ionic this tags have mostly own capsulated scopes.

Greetz, Bengtler

What is the scope of the controller?