I have a simple setup where I want to click a button and get the data from an input control. The problem is that the $scope variable inside of the click function keeps the same value as when the code is first run. Everything works exactly as planned when I create a fiddle in the web.
HTML
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="text" ng-model="authenticationCode">
<br>
<button class="button" ng-click="authenticate()">Authenticate</button>
<br>
<span>Auth info: {{authinfo}}</span>
<br>
<span>authenticationCode - {{authenticationCode}}</span>
</div>
</div>
JavaScript
function TodoCtrl($scope) {
$scope.authenticationCode = 'TESTER';
$scope.authenticate = function(){
var t = $scope.authenticationCode;
$scope.authinfo = t;
};
}
Fiddle of the code working in web
When I run this in PhoneGap
I don't know why $scope.authenticationCode is not updating it's value in the authenticate function. I'm also not sure why this works in the web and I'm having issues in PhoneGap with Ionic.
This issue may be occurring because primitives are being used in the TodoCtrl
, please try this -
HTML
<div ng-controller="TodoCtrl">
<label class="item item-input">
<input type="text" ng-model="input.authenticationCode">
</label>
<br>
<button class="button" ng-click="authenticate()">Authenticate</button>
<br><br>
<span>Auth info: {{input.authInfo}}</span>
<br>
<span>authenticationCode - {{input.authenticationCode}}</span>
</div>
JavaScript
.controller('TodoCtrl', ['$scope', function($scope) {
$scope.input = {
authenticationCode: 'TESTER',
authInfo: ''
};
$scope.authenticate = function() {
$scope.input.authInfo = $scope.input.authenticationCode;
console.log('authInfo: ' + $scope.input.authInfo);
};
}]);