While working on a project in Ionic, I ran into issues with my data-binding. I'm struggling to understand why this is happening.
To troubleshoot, I created a new Ionic project using "ionic start myApp sidemenu" to test the data binding. Even in the new project, the data binding is not functioning correctly. I'm not sure if I'm making a mistake or if there is a bug causing this issue.
Here is the working data-binding example I'm trying to follow. In that example, filling in the input fields updates both the first name and last name. However, when I implement this code in an Ionic project, only the first and last names are updated while the full name remains at the initialized values in the controller. It seems like the $scope.firstName and $scope.lastName variables are not being 'live updated' in the controller, but only in the view for some reason. Even when I try to log $scope.firstName after filling in the input field, it still shows 'John' (the initial value) instead of the input value.
Code in Ionic:
HTML
<ion-view view-title="Search">
<ion-content>
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<strong>Full name:</strong> {{getFullName()}}<br />
<br />
<label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
<label>Set the last name: <input type="text" ng-model="lastName"/></label>
</ion-content>
</ion-view>
Controller:
angular.module('starter.controllers', [])
.controller('SearchCtrl', function($scope) {
// Initialize the model variables
$scope.firstName = "John";
$scope.lastName = "Doe";
// Define utility functions
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.lastName;
};
})
Routing:
angular.module('starter', ['ionic', 'starter.controllers'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html',
controller: 'SearchCtrl'
}
}
})