текст типа ввода и электронная почта ведут себя по-разному внутри директивы angular (двусторонняя привязка данных)

Я не понимаю, как преодолеть следующую ситуацию: у меня есть директива с двумя областями, переданными от родителя как «=», обозначающая привязку модели, скажем, attr1 и attr2 - это эти значения.

Директиву Inside я использовал как в интерполяции {{attr1}}, так и {{attr2}}, также я использовал ее внутри текста ввода и электронной почты в качестве моделей.

Когда я изменяю значение attr1 из текстового поля, значение отражается в интерполяции {{attr1}}, но изменение в текстовом поле attr2 не отражается в интерполяции {{attr2}}, хотя оно привязывается при вводе действительного идентификатора электронной почты, но мне нужно показать электронная почта, когда она набирается.

Есть ли какая-нибудь работа для этого?

Как мне это сделать ?

Скрипка находится здесь.

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(""),

};

Спасибо,

Винод Луи


javascript angularjs angularjs-directive 2-way-object-databinding
person Vinod Louis    schedule 19.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Сэр, это проблема проверки электронной почты html 5 до тех пор, пока вы не введете правильный формат электронной почты, вам не будет показано введенное поле, поскольку электронная почта типа html 5 имеет формат проверки [email protected] что-то вроде этого. и еще одна вещь: в вашем коде вы написали my-directive, а в директиве вы написали myDirective. Я решил эту проблему, попробуйте ввести любой допустимый формат электронной почты в поле электронной почты. На самом деле происходит ng-biding, но когда вы правильно вводите формат электронной почты, текст будет виден. скрипка

Вот мой код html

<div ng-app="app">
 <name attr1="Sudarshan"  attr2="[email protected]"></name>
</div>

нг-код

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(""),
 };
});
person Sudarshan Kalebere    schedule 19.08.2014
comment
да, я знаю, что он становится видимым, когда вводится правильный адрес электронной почты, но мне нужно показать адрес электронной почты во время его ввода, в скрипке, которую я разместил в своем вопросе, если вы введете действительный адрес электронной почты, вы увидите, что модель привязана - person Vinod Louis; 19.08.2014
comment
Привязка не работает с типом ввода = электронная почта # 1426, это проблема с angular.js, которую вы можете увидеть в github github.com/angular/angular.js/issues/1426 все еще не решено, но лучший ответ - вам нужно подтвердить в директиве. также я видел в угловых документах, там также электронная почта не отображается, пока не будет введен действительный адрес электронной почты. Вот как работает angular. - person Sudarshan Kalebere; 19.08.2014
comment
Тем не менее, если вы хотите показать привязку, вы можете использовать jquery, чтобы показать ввод электронной почты в реальном времени, вот пример. jsfiddle.net/nt7Gr/3 - person Sudarshan Kalebere; 19.08.2014