I am building an Ionic app. When I run the following template in the Chrome browser on my computer, it works fine (the {{formData.username}} binds and shows up when the user starts typing in the textbox. I’m also seeing ‘signup’ being printed to the console in the browser, so it seems to be using the right controller.
However, when I run it in the iOS emulator and on an iPhone, the {{formData.username}} shows up statically and doesn’t bind.
Any idea what is happening? Why is it working in the browser but not emulator and iPhone?
controllers.js
.controller('SignupCtrl', function($scope, $ionicLoading, $state, $stateParams){
console.log('signup');
Parse.initialize("xyz", "xyz");
$scope.formData = {};
//Go to the guessing page
$scope.signUp = function(item,event){
console.log($scope.formData.email);
var user = new Parse.User();
user.set("username", $scope.formData.username);
user.set("password", $scope.formData.password);
user.set("email", $scope.formData.email);
user.signUp(null, {
success: function(user) {
// Hooray! Let them use the app now.
console.log('sign up worked!');
$state.go('dashboard');
},
error: function(user, error) {
// Show the error message somewhere and let the user try again.
alert("Error: " + error.code + " " + error.message);
}
});
};
$scope.backToFirstRun = function(item,event){
$state.go('firstrun');
console.log('back button tapped');
};
});
template
<!-- Header -->
<div class="bar bar-header bar-light">
<button on-touch="backToFirstRun()" class="button icon-left ion-chevron-left button-clear button-dark">
Back
</button>
<h1 class="title">Signup</h1>
</div>
<!-- Space between header and signup form -->
<div class="spacer" style="width: 300px; height: 50px;"></div>
<div class="list list-inset">
<!-- Signup form text fields -->
<form>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="email" ng-model = "formData.email">
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model = "formData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model = "formData.password">
</label>
<!-- Submit button for signup form -->
<button on-touch="signUp()" class="button button-positive button-block">
Sign up
</button>
</form>
</div>
{{formData.email}} <br>
{{formData.username}} <br>
{{formData.password}}
Do you get any error messages in the terminal when running emulation? Various aspects of my app can fail to work when e.g. a plugin failed to load. Sometimes this process goes a bit differently from the browser.
Beyond that though, do you define a controller to be used on that particular page anywhere? Try setting a generic ng-controller. Don’t think it should be necessary but still. Another thing to consider is that it used to be the case that binding wouldn’t happen for form inputs that aren’t valid. Don’t think it should matter in your case, but keep that in mind, too.
Anyway, check for error messages. If you’re not getting them, consider trying the phonegap developer app, it pushes back messages to the console including your own console.log stuff. Might help you debug this thing.
When I run the app on a device:
When the page loads, ‘signup’ appears in the console
When I tap the submit button after an email is entered in the email field, the email does not get returned to the console. Instead I see Resetting plugins due to page load and then ‘signup’ gets returned to the console again.
Hi abbarra-- I am getting some messages in the console. Particularly when I tap the button, I see:
2014-12-03 21:54:58.559 sliding[11195:3115262] Resetting plugins due to page load.
2014-12-03 21:54:58.704 sliding[11195:3115262] Finished load of: file:///private/var/mobile/Containers/Bundle/Application/208E1472-1067-4F78-A714-0F3B82C867A8/sliding.app/www/index.html?#/signup
2014-12-03 21:54:58.745 sliding[11195:3115262] signup
I’ve also put the full list of what gets returned earlier in the thread. You mentioned that the form inputs can be invalid…what does that mean and how do I know figure out if I’m doing this?
So I did a test on another page where I removed the line that initializes Parse:
Parse.initialize("xyz", "xyz");
When I removed it, the texbox binds and I’m seeing the content of the textbox as I type. When I add it, it doesn’t work anymore and I just see {{test}} (the textbox has ng-model = “test”).
This is what made it work:
In my index.html file I had
is not a correct path to a file. Try it in your browser! It tries to load it but can’t, and then when you run the Parse.initialize function it tries to run a function that doesn’t exist, which causes various problems later on apparently.
Either www. or http://www. Nice work on figuring it out!