输入类型text和email在angular指令中的行为不同(双向数据绑定)

input type text and email behaving differently inside angular directive (Two way databinding)

本文关键字：数据绑定 text 类型 email 指令 angular 输入      更新时间：2023-09-26

我不知道如何克服以下情况，我有一个指令，两个范围从父传递为"="表示模型绑定说attr1和attr2是那些值。

内部指令我在插值{{attr1}}和{{attr2}}中都使用了，我也在输入类型文本和电子邮件中使用了它作为模型。

当我改变attr1的值从文本框的值得到反映在插值{{attr1}}，但在attr2文本框的变化不反映在插值{{attr2}}，虽然它得到绑定时输入一个有效的电子邮件id，但我需要显示电子邮件时，它被键入。

有什么方法可以解决这个问题吗?

我该怎么做呢?

小提琴在这里。

app.directive("myDirective", function(){
return {
    restrict: "EA",
    //replace:true,
    //transclude:true,
    scope: {
        attr1: "=",
        attr2: "="
    },
    template: [
        "<div>attr1 : {{attr1}}</div>",
        "<div>attr2 : {{attr2}}</div>",
        "attr1 : <input type='text' ng-model='attr1' /><br/>",
        "attr2 : <input type='email' ng-model='attr2' /><br/>",
        ].join(""),
};

谢谢,

Vinod路易

先生，这是html 5电子邮件验证的问题，除非您输入正确的电子邮件格式，否则您将不会显示html 5类型电子邮件具有验证格式a@b.c类似这样的键入字段。还有一件事，在你的代码中你写了my-directive，在directive中你写了myDirective。我已经解决了这个问题，请尝试在您的电子邮件字段中输入任何有效的电子邮件格式。实际上，ng-biding正在发生，但当你输入正确的电子邮件格式，文本将是可见的。小提琴

这是我的代码html 
<div ng-app="app">
 <name attr1="Sudarshan"  attr2="sud@gmail.com"></name>
</div>

ng-code 

var app = angular.module("app", []);
app.directive("name", function(){
     return {
        restrict: "E",
        link:function(scope,e,a){
            scope.att1=a.attr1;
            scope.att2=a.attr2;
         },
       template: 
            ["<div>attr1 : {{att1}}</div>",
            "<div>attr2 : {{att2}}</div>",
            "attr1 : <input type='text' ng-model='att1' /><br/>",
            "attr2 : <input type='email' ng-model='att2' /><br/>"].join(""),
 };
});
相关文章：