在AngularJS Dynamic email驗證元素中，當我填寫電子郵件檢查元素時，它被重置

Question

這是Angular.JS中的電子郵件檢查元素代碼幾乎沒問題，但是這存在問題。 當我填寫電子郵件檢查元素時，它被重置！

示例 我將此內容寫入電子郵件檢查元素。

「test@test.com」

但這是復位！當我寫''。 < - 點。

「測試@測試」 < - OK

「測試@測試」。 < - 重置輸入。當我寫''。 < -

爲什麼發生這個問題？

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

Answer 1

你需要讓你的指令將其替換選項，並從指令元素的name屬性（基本上不重新編譯輸入） 。這是角度驗證，當你編譯你的指令時顯示奇怪的行爲，它在解析後重置modelValue（undefined），但在這種情況下，它也會重置viewvalue。你可以看到，如果你直接使用輸入類型，它不會發生，這似乎是重新編譯模板導致此問題。

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

     } 
    }; 

和

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

Plnkr