I have two input fields inside my ion-content and they both have an ng-model attached to them. Then inside my ion-footer I have an ng-click where I call a function and pass in the two ng-models.

This all worked fine when I had the ng-click inside the ion-content, but when I move it to the footer I get undefined for the two parameters I pass to the function.

So does this mean that ion-content and ion-footer have different $scope's? Even though they're in the same file and have the same controller??

I have two input fields inside my ion-content and they both have an ng-model attached to them. Then inside my ion-footer I have an ng-click where I call a function and pass in the two ng-models.

This all worked fine when I had the ng-click inside the ion-content, but when I move it to the footer I get undefined for the two parameters I pass to the function.

So does this mean that ion-content and ion-footer have different $scope's? Even though they're in the same file and have the same controller??

• javascript
• angularjs
• cordova
• angularjs-scope
• ionic-framework

• 1 create a scope like $scope.data = {} & place all ng-model which are binded on html.place in this object like ng-model="data.model1", ng-model="data.model2" – Pankaj Parkar Commented May 8, 2015 at 9:06
• @pankajparkar awesome! Works like a charm! But I'm still curious as to why it wasn't working the way it was? Do content and footer have different scopes in the case of ng-model where I don't have a predefined variable in my controller? Just curious. – Mr.P Commented May 8, 2015 at 9:14
• I believe ion-content & ion-footer do create a child scope..& as you declared $scope.data = {} in your controller & do access its inner property of it..that will do inherit scope from parent..should I add answer? – Pankaj Parkar Commented May 8, 2015 at 9:28
• @pankajparkar yeah go for it, cause you're the one that solved my problem! – Mr.P Commented May 8, 2015 at 9:30

2 Answers 2

I believe ion-footer & ion-content creates new child scope which is Prototypically inerherit from current scope. Below ionic code will give you better illustration that how it works internally, the scope: true, is responsible for creating a new child scope.

Code

.directive('ionContent', [
  '$parse',
  '$timeout',
  '$ionicScrollDelegate',
  '$controller',
  '$ionicBind',
function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    require: '^?ionNavView',
    scope: true, //<-- this creates a prototypically inerherited scope
    template:
    '<div class="scroll-content">' +
      '<div class="scroll"></div>' +
    '</div>',

You need to use . annotation will fix your problem

Eg.

If you are using variable as primitive like

$scope.volume = 5

Then you need to use:

$scope.data = { 'volume' : 5}

Angular Prototypal Scope Inheritance

Explanation of the answer in the ments by pankajparkar:

the ion-content directive has its new scope. It works using the dot notation (important when dealing with scope inheritance)

That is why it works with ng-model="data.model1

Please refer to:

AngularJS documentation on scopes

Egghead video