Why do I need $parent to enable the function in ng-click when using ion-scroll?

Question

I am using the following versions:

1. Ionic, v1.0.0-beta.14
2. AngularJS v1.3.6

Route configuration:

myApp         


        

Answer 1

The problem is the inheritance. Between your controller's scope and those fields, there are several new scopes (ion-content, ion-scroll and probably others).

So for example the ng-model="search_content". When you write in there, it is going to create a search_content variable inside the ion-content scope (or an intermediary scope if there is any that I didn't see). Since search_content is being created inside ion-content, your controller won't see it.

If you do $parent.search_content it will create it in the parent content (AKA the controller's scope).

You shouldn't do that, what $parent is for you today, tomorrow it can point to anything else (because you could add a new scope in between without knowing it so $parent will then point to the ion-content.

So instead of doing that, you need to use objects and no primitives, for example:

ng-model="form.search_contact"

Thank to that, it will look for the form object through the prototype chain until it finds it on the controller's scope and use it (just what you need).

Read this which is hundred times better than my explanation.

Answer 2

This is a very typical angular scoping issue. Ion-view creates a new child scope and uses prototypical inheritance: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Three are several ways to solve:

• always use a dot: https://egghead.io/lessons/angularjs-the-dot
• use the 'controller as' syntax: http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/