Ionic content and ionic footer have different scales

Question

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

All this worked fine when I had ng-click inside the ion content, but when I go to the footer, I get undefined for the two parameters that I pass to the function.

Does this mean that the ion content and ionic footer are on a different scale? Even if they are in the same file and have the same controller.

Answer 1

I believe that ion-footer and ion-content creates a new input area, which is prototypically inerherit from the current area. The ion code below will give you a better illustration of how it works inside, scope: true, is responsible for creating a new child region.

the 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 must use annotation . which will fix your problem.

Eg.

If you use the variable as primitive, for example

 $scope.volume = 5 

Then you need to use:

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

Angular Inheritance Visibility Prototype

Answer 2

Explanation of the answer in pankyparkar comments:

The ion content directive has a new area. It works using dot notation (important when working with area inheritance)

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

Talk to:

AngularJS documentation by area

Egghead Video