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，就像控制器中的对象一样。一旦我通过在字段中键入来更改它，它就会变为未定义。我在视图中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>

$ scope元素变为＆＃34; undefined＆＃34;改变后

1 个答案: