ion-content and ion-footer have different $scope

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??

Solution 1:

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

Solution 2:

Explanation of the answer in the comments 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