Question

在AngularJS中进行数据插值时出现问题... 我为电子邮件创建了一个输入字段，并使用ng-model从该字段中获取数据，但是当我更改输入字段中的文本时，变量中的值将被删除...我不知道这是否有任何区别，但数据（页面和脚本）来自Nodejs服务器。这是代码：

更新

正如@devqon所说，当我在type =“email”中使用电子邮件时的数据验证导致它出现故障...当我将其更改为type =“text”时它工作得很好......但是，如果我想要电子邮件???

的输入类型

HTML页面：

<html ng-app='myApp'>
    <head>
        <!-- JQuery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!-- AngularJS-->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <!-- stylesheet -->
        <link href="/style.css" type="text/css" rel="stylesheet"/>
        <!-- Angular Source Code -->
        <script src="/js/app.js"></script>
    </head>
    <body ng-controller="mainController">

        <div class="container">

            <div class="col-md-6 col-md-offset-3">

                <form class="form-signin">
                    <h2 class="form-signin-heading">Please sign in</h2>
                    <label for="inputEmail" class="sr-only">Email address</label>
                    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" ng-model="userEmail" required autofocus>
                    <label for="inputPassword" class="sr-only">Password</label>
                    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
                </form>

            </div>

        </div>
        <h1>Email: {{ userEmail }} </h1>
    </body>
</html>

app.js文件：

var myApp = angular.module("myApp",[]);

myApp.controller('mainController',["$scope",function($scope){

    $scope.userEmail = "something";
    $scope.$watch('userEmail',function(){
        console.log("changed");
    });

}]);

如果需要，还可以使用nodejs app file：

var express = require('express');
var app = express();
var path = require('path');
var mongoose = require('mongoose');
var config = require('./config');
var setupController = require('./controllers/setupController.js');
var apiController = require('./controllers/apiController.js');
var appController = require('./controllers/appController.js');
var consolidate = require('consolidate');


var port = process.env.PORT || 3000;

app.use(express.static(__dirname + '/public'));

mongoose.connect(config.getConnectionString());
apiController(app);

//appController(app);
app.get('/',function(req,res){

    res.sendfile(path.join(__dirname + '/views/index.html'));

});

app.listen(port);

Answer 1

你必须牢记规则

模型中应该总是有一个点

因为ngModel指令使用双向数据绑定。我建议你使用控制器作为语法并更新你的代码，如

<body ng-controller="mainController as ctrl">

    <div class="container">

        <div class="col-md-6 col-md-offset-3">

            <form class="form-signin">
                <h2 class="form-signin-heading">Please sign in</h2>
                <label for="inputEmail" class="sr-only">Email address</label>
                <input type="email" id="inputEmail" class="form-control" placeholder="Email address" ng-model="ctrl.userEmail" required autofocus>
                <label for="inputPassword" class="sr-only">Password</label>
                <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
            </form>

        </div>

    </div>
    <h1>Email: {{ userEmail }} </h1>
</body>

这是因为一旦用户更改了值，将在子作用域上创建userEmail，并且绑定将使用此值而不是控制器中存在的值。以这种方式$scope.userEmail将保持与初始值相同。

Answer 2

在html5中有一个验证，只有在输入正确的电子邮件时才导致数据绑定...我甚至没有更改代码...我只是输入了一个有效的电子邮件地址并且它有效！

AngularJS - 更改时的ng-model清洁变量

2 个答案: