2016-11-21 11 views
0

AngularJSでデータ補間を行うときに問題が発生しました... 電子メール用の入力フィールドを作成し、このフィールドからデータを取得するためにng-modelを使用しましたが、入力フィールドのテキストを変更すると、変数の値が削除されます...これが何らかの違いをもたらすかどうかはわかりませんが、データ(ページとスクリプト)はNodejsサーバーから来ています。 @devqonが言ったようにAngularJS - ng-modelクリーニング変数の変更時

UPDATE

、データ検証、私はタイプ=「メール」で電子メールを使用するときに、私は=と入力し、それを変更した場合、」...それが誤動作する原因となっている。ここでは、コードですテキスト "それはうまく働いた...しかし、私は電子メールの入力の種類をしたい場合はどうですか?

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:

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); 
+1

真実を検証しないため、おそらく削除されます。おそらくそれは入力タイプの 'email'だが、無効な電子メールアドレスがあるからだろう。真実を検証しなかった場合、角度は 'ng-model'に値を適用しません – devqon

+0

はい、あなたは正しい...それは働いた! – julianomontini

答えて

1

あなたは心の中でルールを維持する必要があります

モデルには必ずドットを入れてください。

ngModelディレクティブは双方向データバインディングを使用しているためです。私は、ユーザーが値を変更すると、userEmailは子スコープで作成され、結合が、1つではなく、現在のこの値を使用しますので、この問題が発生しますが、構文としてのコントローラを使用することをお勧めして

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

のようなコードを更新しますintコントローラ。このようにして$scope.userEmailは初期値と同じになります。

+0

新しい子スコープにはどこにバインドされますか?彼はすでにコントローラの値を初期化しているので、 'ng-model'は正しくバインドする必要があります。 – devqon

0

html5に検証があり、正しい電子メールが入力されたときにのみデータがバインドされています...コードを変更していない...有効な電子メールアドレスを入力しました。

関連する問題