javascript - $scope 元素更改后变为 "undefined"

Question

我有一个像这样的 Controller 和对象

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，就像 Controller 中的对象一样。一旦我通过在字段中输入来更改它，它就会变成未定义。我在一个 View 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

因为您的输入类型是电子邮件。当您输入无效的电子邮件字符串时，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>