$ сфера элемент становится «неопределенным» после того, как изменяется

Question

У меня есть контроллер и объект, как этот

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) 
    } 

... 

и некоторые HTML вроде этого:

<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> 
... 

Когда я загружаю страницу, на поле не сказать default-value, как в объекте в контроллере. Как только я изменю его, введя в поле, он превратится в undefined. Я в представлении, landing.splash, сконфигурированный так:

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

Любые мысли о том, как диагностировать проблему?

Answer 1

Потому что ваш тип ввода - email. Когда вы вводите недопустимую строку электронной почты, AngularJS не присваивает значение $scope.

Пожалуйста, проверьте эту рабочую демонстрационную версию: http://jsfiddle.net/jL3sa5e9/2/. Если вы вводите недействительный адрес электронной почты, {{ user.email }} ничего не выводит. Только после того, как ваш ввод будет действительным, например, joy@xiamen.com, он будет отображаться.

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>