因$編譯而導致的角度驗證鎖定輸入？

Question

小提琴重現：http://jsfiddle.net/cp6eydb1/1/

我注意到，已通過$compile運行輸入行爲古怪，當它涉及到外的開箱驗證，但我不知道如果我做錯了什麼。

.directive('dummydirective', ['$compile', '$timeout', function ($compile, $timeout) { 
     return { 
      restrict: 'EA', 
      scope: {}, 
      replace: true, 
      // notice how the field has type="email", which triggers email validation 
      template: '<input type="email" name="booger" ng-model="bim">', 
      link: function (scope, element) { 
       $timeout(function() { 
        $compile(element)(scope); 
       }); 

      } 
     }; 
    }]); 

我有其中場被阻止完全，粘貼有效的字符串（即，有效的電子郵件地址），當我只能填充模型的情況。按字符輸入被阻止（一個字符不是有效的電子郵件地址）。

在jsfiddle中存在奇怪的行爲，您可以看到填充字段正在工作，但只要您開始刪除輸入（會導致字段無效），就會發生奇怪的事情。該字段被清空，並且輸入被阻止。但是，一次粘貼有效的電子郵件地址是行不通的。

這是怎麼回事？這是一個錯誤？

Answer 1

現在被克隆元素

最好的解決，這似乎在嵌套指令工作還沒有消除驗證或鎖定領域：

var clonedEl = element.clone(); 
element.replaceWith(clonedEl); 
element.remove(); 

$compile(clonedEl)(scope); 

小提琴：http://jsfiddle.net/cp6eydb1/3/

Answer 2

我不知道背後怪異的行爲的確切原因，但你可以嘗試這樣的事情

$compile(element.contents())(scope); 

所以，改變指令如下圖所示

.directive('dummydirective', ['$compile', '$timeout', function ($compile, $timeout) { 
    return { 
     restrict: 'EA', 
     scope: {}, 
     replace: true, 
     // notice how the field has type="email", which triggers email validation 
     template: '<input type="email" name="booger" ng-model="bim">', 
     link: function (scope, element) { 
      $timeout(function() { 
       $compile(element.contents())(scope); 
      }); 

     } 
    }; 
}]); 

現在，它的工作的罰款。以下是更新的小提琴 http://jsfiddle.net/cp6eydb1/2/

希望它可以幫助...