I have this page which links the input.countNum scope variable to the input with ng-model. The value which is displayed on the button shows fine. When you click the button on the first page, it navigates to the second page which also displays the scope variable. But the variable is reset to the default declaration value in the controller code.
How do I maintain the scope value from ng-model between pages within the same controller?
tab-dash.html
<ion-view view-title="Test">
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Count</span>
<input class="text-right" type="number" pattern="[0-9]*" ng-model="input.countNum">
</label>
</div>
<button class="button button-full button-positive" ng-click="create()" ui-sref="tab.count">
Count is ({{input.countNum}})
</button>
</ion-content>
</ion-view>
controller.js
.controller('DashCtrl', function($scope) {
$scope.input = {
countNum: 1
};
$scope.create = function() {
// Logic here
};
})
count.html
<ion-view view-title="Count">
<ion-nav-bar class="bar-energized">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padding">
<button class="button button-full button-positive">
({{input.countNum}})
</button>
</ion-content>
</ion-view>
app.js
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.count', {
url: '/count',
views: {
'tab-dash': {
templateUrl: 'templates/count.html',
controller: 'DashCtrl'
}
}
})
Controllers are not shared between pages - a new instance is created each time the controller is used. You should not expect to be able to share data from a controller with anything outside the scope of that controller either. If you need to share data between pages or controllers, you should use a service or "value" object to maintain that state. Another option would be passing the data between the pages using the state params:
ui-sref="tab.count({ input: input })"
Note that Ionic uses the Angular UI Router project for its navigation logic, so the documentation there also applies to using Ionic.