Nell'elemento di validation della posta elettronica dynamic di AngularJS, quando compro l'elemento di controllo di posta elettronica, viene reimpostato

Questo è il codice di controllo dell'e-mail in Angular.JS Quasi è Ok, ma questo ha un problema. Quando compro l'elemento di controllo e-mail, è resettato!

Esempio: scrivo questo nell'elemento di controllo di posta elettronica.

"[email protected]"

Ma questo è Reset! quando scrivo il '.' <- punto.

"test @ test" <- OK

"test." <- Resettare l'ingresso. Quando scrivo il '.' <-

Perché il problema è avvenuto?

Javascript

<script> angular.module('test', []) .controller('MyController', ['$scope', '$window', function($scope, $window) { $scope.sendMessage=function(toSb){ alert(toSb); }; }]) .directive('emailInput', function($compile) { return { restrict: 'C', template: '<input type="email" ng-model="emailtext" required>{{emailtext}}', link: function(scope, elem, attrs){ scope.name="emailAddress"; var input = elem.find("input")[0]; input.name = "emailAddress"; $compile(input)(scope); } }; }); </script> 

HTML

 <form name="myForm"> <div class="email-input"></div> inputIsValid={{myForm.emailAddress.$valid}}<br> <span class="error" ng-show="myForm.emailAddress.$error.required">Required!</span> <span class="error" ng-show="myForm.emailAddress.$error.email">Not valid email!</span> </form> 

Dovresti fare la tua direttiva con l'opzione di sostituzione e get l'attributo nome dall'elemento della direttiva (in sostanza, non compilare nuovamente l'input). È la validation angular che mostra un comportmento strano quando si è compilata la tua direttiva, reimposta il modelValue (undefined) dopo l'analisi, ma in qualche modo in questo caso, ripristina anche la viewvalue. È ansible vedere che non accade se si utilizza direttamente il tipo di input, sembra che la ricompilazione del model sta causando questo problema .

 .directive('emailInput', function ($compile) { return { restrict: 'C', replace:true, template: '<input type="email" ng-model="emailtext" required>', link: function (scope, elem, attrs) { } }; 

e

 <div class="email-input" name="emailAddress"></div> 

Plnkr