2

这是 Angular.JS 中的电子邮件检查元素代码 几乎没问题，但这有一个问题。当我填写电子邮件检查元素时，它已重置！

示例 I 将其写入电子邮件检查元素。

“test@test.com”

但这是重置！当我写“。” <-点。

“测试@测试” <- 好的

“测试一下。” <- 重置输入。当我写“。” <-

为什么会出现问题？

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

1 回答 1

1

您需要使用 replace 选项制作指令并从指令元素中获取 name 属性（基本上不要再次编译输入）。当您编译指令时，角度验证会显示奇怪的行为，它会在解析后重置模型值（未定义），但在这种情况下，它也会重置视图值。可以看到直接使用输入类型是不会出现的，好像是重新编译模板导致了这个问题。

.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

于 2014-08-30T03:20:34.423 回答