Not able to add ng-controller to ion-view-model

ionic-v1
1

I have a signup template/view written using ionic framework but whenever I submit the Signup form the value of ng-model $scope.account remains Undefined. According to me the main reason for this is that I am not able add controller name (SingupController) in signup.html. Whenever I add ng-controller=“SingupController” and run the app browser get closed with a message “Unable to attache. Operation is timeout”

I am using Visual Studio 2013, AngularJS, Ionic and Adobe PhoneGap.

Here is a is the code which I am using.

singup.html:

<ion-header-bar>
    <button class="button" ng-click="closeSignup()">Cancel</button>
    <h1 class="title">Sign up</h1>
</ion-header-bar>

<ion-content ng-controller="SignupController">
    <form ng-submit="doSignup()">
        <div class="list list-inset">

            <label class="item item-input">
                <input type="text" placeholder="First Name" ng-model="account.firstName">
            </label>

            <label class="item item-input">
                <input type="text" placeholder="Last Name" ng-model="account.lastName">
            </label>

            <label class="item item-input">
                <input type="email" placeholder="Email" ng-model="account.email">
            </label>

            <label class="item item-input">
                <input type="text" placeholder="School" ng-model="account.school">
            </label>

            <label class="item item-input">
                <input type="text" placeholder="Country" ng-model="account.country">
            </label>
        </div>
        <div class="list list-inset">
            <label class="item item-input">
                <input type="password" placeholder="Password" ng-model="account.password">
            </label>

            <label class="item item-input">
                <input type="password" placeholder="Confirm Password" ng-model="account.confirmPassword">
            </label>
            <p>Minimum 8 characters a-Z, 0-9</p>
        </div>

        <label class="item">
            <input type="submit" class="button button-block button-balanced" value="Sign up" />
        </label>
    </form>

</ion-content>

And my controller code in controller.js is as follows:

angular.module('angularApp.controllers', [])

.controller('SignupController', ['$scope', '$ionicModal', '$timeout', '$http', function ($scope, $ionicModal, $timeout, $http) {
    // Form data for the login modal

    // $scope.signupData = {};

    // Create the signup modal that we will use later
    $ionicModal.fromTemplateUrl('templates/signup.html', {
        scope: $scope
    }).then(function (modal) {
        $scope.modal = modal;
    });

    // Triggered in the signup modal to close it
    $scope.closeSignup = function () {
        $scope.modal.hide();
    };

    // Open the signup modal
    $scope.signup = function () {
        $scope.modal.show();
    };
    $scope.doSignup = function () {


        var config = {
            method: "POST",
            url: "http://localhost:60923/api/account/",
            data: $scope.account
        };
        $http(config).success(function (data) {
            $scope.mydate = data;
        });

    };
}])

I am really not sure where the problem is? Please advice me if you see any problem inside my code. Thanks in advance.

2

problem:
a form gets its own scope, and you not initialize your account object in your controller. so the account-object is only visible in the form.

add

$scope.account = {};

to your controller and it should work

3

I have added $scope.account = {}; but still facing the same problem.

4

I was facing the same situation.
This thing was driving me insane…

then after a whole wasted day I just discovered this:

and I started banging my head against the wall… :astonished:

to cut it short, the problem (which is not really a problem if u look to it in another perspective) is the fact that
when you set an

<input type="email" ng-model="newUser.email" />

you are suggesting to angular that you want that field to be evaluated as an email.
So if the field is not evaluated correctly ( means, you are not providing a valid email address), then angular will keep passing you undefined values…

a live example
http://codepen.io/biinjo/pen/nfmiE

hope this could help u cope w/ ur troubles.

Happy Coding!
Aaron.