CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Noah
Noah

Reputation: 4751

$scope element becomes "undefined" after being changed

I have a controller and object like this 

app.controller('MainController', function( $scope, $rootScope, $window, $state, $urlRouter, $http, Content, flash, $modal, $stateParams ) {

    $scope.user = {
        username: '',
        password: '',
        email: 'default-value'
    }

    $scope.log = function ( message ) {
        console.log( message )
    }

...

And some HTML like this:

<form class="form-inline form-waitlist" ng-show="showSignup">
    <span class="form-group">
        <input type="email" class="input-white form-control input-font-lg" ng-model="user.email" placeholder="Email" />

        <button class="btn btn-white btn-lg hidden-xs" ng-click="log( user.email )">Sign Up as {{ user.email }}</button>
...

When I load the page the field does say default-value, like in the object in the controller. As soon as I change it by typing in the field, it turns to undefined. I'm in a view, landing.splash, configured like this:

$stateProvider
    .state( 'landing', {
        url: '/home',
        templateUrl: 'app/views/landing.html',
        controller: 'MainController'
    })
        .state( 'landing.splash', {
            url: '/splash',
            templateUrl: 'app/views/landing-splash.html'
        })

Any thoughts on how to diagnose the problem?

Upvotes: 0

Views: 93

Answers (1)

Joy
Joy

Reputation: 9560

Because your input type is email. When you enter an invalid email string, AngularJS would not assign the value to $scope.

Please check this working demo: http://jsfiddle.net/jL3sa5e9/2/. If you enter an invalid email, {{ user.email }} will not output anything. Only after your input is an valid email like [email protected], it will be displayed.

JavaScript:

angular.module('Joy', [])
.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.user = {
        email: ''
    };
}]);

HTML:

<div ng-app="Joy">
    <div ng-controller="MyCtrl">
        <input ng-model="user.email" type="email">
        <div>Email: {{ user.email }}</div>
    </div>
</div>

Upvotes: 1

Related Questions