Angular ng-valid-email＆＃34;被阻止＆＃34;与干预定制指令

Question

我在Angular 1.4中实现了一个自定义指令，它在表单中创建了一个内部输入元素。我在验证方面遇到了问题。

1）当使电子邮件无效时（在输入框的字符串末尾添加＆＃39;。＆＃39;），ng-invalid-email类不会向上传播到表单（可能是因为vc-input指令妨碍了？）。所以它报告为＆＃34;要求无效＆＃34;而不是＆＃34;电子邮件无效＆＃34;。

2）如果我将vc-input更改为仅输入（并删除关闭vc-input元素），它将按预期工作（尝试在片段中）。

有什么方法可以确保这种有效性通过它应该的方式传递？

＆＃13;

＆＃13;

'use strict';

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

myApp
  .directive('vcInput', ['$compile',
    function ($compile) {
      return {
        restrict: 'E',

        link: function ($scope, elem, attrs) {
          var toDash = function(str){
            return str.replace(/([A-Z])/g, function($1){return '-'+$1.toLowerCase();});
          };

          // returned glyph string could be glyphicon or fontawesome
          var mapIcon = function(iconName) {
            var glyphName = '';

            if (iconName === 'search') {
              glyphName = 'glyphicon glyphicon-search';
            }
            else if (iconName === 'user') {
              glyphName = 'glyphicon glyphicon-user';
            }
            else if (iconName === 'password') {
              glyphName = 'glyphicon glyphicon-lock';
            }
            else if (iconName === 'token') {
              glyphName = 'glyphicon glyphicon-tags';
              glyphName = 'fa fa-tags';
            }

            return glyphName;
          };

          var leadIcon = elem.attr('lead-icon');
          elem.removeAttr('lead-icon');

          var leadClass;
          var spanClass = '';

          if (leadIcon !== undefined) {
            leadClass = mapIcon(leadIcon);
            if (leadClass) {
              spanClass = 'left-inner-addon';
            }
            else {
              spanClass = 'left-inner-no-icon';
            }
          }

          var icon = '';
          if (leadClass !== undefined) {
            icon = '<i class="' + leadClass + '"></i>';
          }

          var elementData = elem[0].outerHTML;
          var startIndex = elementData.indexOf('<vc-input') + 9;
          var stopIndex = elementData.indexOf('>') ;
          var allAtt = elementData.substring(startIndex, stopIndex);

          angular.forEach(attrs, function(value, key) {
            if (key.lastIndexOf('$',0) && key !== 'leadIcon') {
              elem.removeAttr(toDash(key));
            }
          });

          var span1 = '<span class="' + spanClass + '">';
          var span2 = '</span>';
          var html = $compile(span1 + icon + '<input ' + allAtt + '/>' + span2)($scope);
          elem.html(html);
          
        }

      };
    }])


;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
<form name="myForm">
    <label>Email:
        <vc-input type="email" name="input" ng-model="email.text" ng-init="email.text='joe@aol.com'" required></vc-input>
    </label>
    <div role="alert">
      <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
      <span class="error" ng-show="myForm.input.$error.email">
        Not valid email!</span>
    </div>
    <samp>text = {{email.text}}</samp><br/>
    <samp>myForm.input.$valid = {{myForm.input.$valid}}</samp><br/>
    <samp>myForm.input.$error = {{myForm.input.$error}}</samp><br/>
    <samp>myForm.$valid = {{myForm.$valid}}</samp><br/>
    <samp>myForm.$error.required = {{!!myForm.$error.required}}</samp><br/>
    <samp>myForm.$error.email = {{!!myForm.$error.email}}</samp><br/>
</form>
</div>

＆＃13;

＆＃13;

＆＃13;