让AngularJs更新{{binding}}作为用户在输入[电子邮件]中键入的内容

Angular仅在用户输入有效的电子邮件地址后，从

输入[email]

更新模型。我如何在页面的某个地方添加

{{{binding}

，当用户键入时，即使在用户键入有效的电子邮件地址之前，该地址也会更新为电子邮件值

以下是我迄今为止所尝试的：

<div ng-app>
    <div ng-controller="MyCtrl">
        <form name="MyForm" novalidate>
            Name: <input type="text" name="name" ng-model="contact.name" /><br/>
            Name as you type: {{contact.name}}<br/>
            Email: <input type="email" name="email" ng-model="contact.email" /><br/>
            Email as you type: {{contact.email}} (doesn't work)<br/>
            Also doesn't work: {{$document.forms.MyForm.elements.email.value}}
        </form>
    </div>
</div>

姓名会像我想要的那样实时更新，但电子邮件不会

我想让电子邮件验证处于启用状态。我只需要一些方法来绑定未经验证的

input[email]

文本，这样它就会随着用户的输入而更新

更新2014/7/8

我想添加一个明确的要求，

type=“email”

保持不变。我不想改变标记的语义来绕过框架的限制。如果需要，我宁愿引入一个补充依赖项（如jQuery）来填充所需的功能

我并不反对在控制器中处理验证——正如rageandqq和charlietfl所建议的那样——如果可以轻松完成的话。但是环顾四周，（根据我的要求）。

您的电子邮件输入上的

type=“email”

属性是导致DOM绑定混乱的原因。 将其更改为

type=“text”

可以正确显示您的

{{contact.email}

---

这就是angularjs的工作原理。如果您使用

，则在输入有效之前，angular不会绑定您的输入。在这种情况下，值必须是正确的电子邮件地址

---

请在此处阅读更多内容：

到目前为止，我提出的解决方法是使用jQuery来侦听

输入

更改并更新我调用的

formRaw

上的

$scope

对象。它起作用了。尽管如此，我还是希望有人能来给我指一条更好的路

更新后的示例：

<div ng-app>
    <div ng-controller="MyCtrl">
        <form name="MyForm" novalidate>
            Name: <input type="text" name="name" ng-model="contact.name" /><br/>
            Name as you type: {{contact.name}}<br/>
            Email: <input type="email" name="email" ng-model="contact.email" /><br/>
            Email Model: {{contact.email}}<br/>
            Email Form: {{formRaw.email}}
            {{q}}
        </form>
    </div>
</div>

---

即使angularjs不是这样“工作”，也肯定有一些变通方法可以达到我所要求的效果。我可以绑定到解析为DOM值的表达式而不是绑定到模型吗？当然可以使用rageandqq solution type=“text”而不是“email”@MichaelKropat look in angular source，您可以借用它们的验证正则表达式来进行验证method@charlietfl谢谢你的建议。我更新了这个问题，解释了为什么这对我的案例来说可能很棘手。我希望保留电子邮件验证，所以不幸的是，这不是一个选项。不幸的是，这就是AngularJS的构建方式。我建议您只需将电子邮件验证逻辑放在控制器中。

<div ng-app>
    <div ng-controller="MyCtrl">
        <form name="MyForm" novalidate>
            Name: <input type="text" name="name" ng-model="contact.name" /><br/>
            Name as you type: {{contact.name}}<br/>
            Email: <input type="email" name="email" ng-model="contact.email" /><br/>
            Email Model: {{contact.email}}<br/>
            Email Form: {{formRaw.email}}
            {{q}}
        </form>
    </div>
</div>

function MyCtrl($scope) {
    $scope.contact = {};
    $scope.formRaw = {};

    $('input[type=email]').on('keyup change', function () {
        var input = $(this);
        $scope.formRaw[input.attr('name')] = input.val();
        $scope.$digest(); // FIXME: there's got to be a better way
    });
}