使用 angular 指令的自定义表单中的电子邮件字段在我输入时消失

Question

我目前正在学习 AngularJS，我遇到了这个话题 "Angular-Directives"。所以我打算制定自己的 <custom-form> 指令。

angular部分

app.directive('customForm', [function(){
 return {
  scope: {
   userName : '@',
   passWord : '@',
   emailId : '@',
   telPhone : '@',
   address : '@',
   city : '@',
   state : '@',
   country : '@',
   pinCode : '@',
  },
  controller: 'FormController',
  restrict: 'AE',
  templateUrl: 'tpls/form.html',
  
 };
}]);

app.controller('FormController', [function(){
 var self  = this;
 self.username = "hemal";
 self.passWord = "passWord";
}]);

HTML部分：

<!-- index.html -- >
<!-- <div ng-controller="FormController as fc">
            <custom-form user-name pass-word email-id tel-phone country pin-code>
            </custom-form>

        </div> -->

<!-- tpls/form.html -->
<div ng-hide="userName == null">
    <label>Name:</label>
    <input type="text" ng-model="userName"></input>
</div>
<div ng-hide="passWord == null">
    <label>Pass:</label>
    <input type="text" ng-model="passWord"></input>
</div>
<div ng-hide="emailId == null">
    <label>Email:</label>
    <input type="email" ng-model="emailId"></input>
</div>
<div ng-hide="telPhone == null">
    <label>telephone:</label>
    <input type="tel" ng-model="telPhone"></input>
</div>

<div ng-hide="address == null">
    <label>Address:</label>
    <input type="text" ng-model="address"></input>
</div>
<div ng-hide="city == null">
    <label>city:</label>
    <input type="text" ng-model="city"></input>
</div>
<div ng-hide="state == null">
    <label>state:</label>
    <input type="text" ng-model="state"></input>
</div>
<div ng-hide="country == null">
    <label>country:</label>
    <input type="text" ng-model="country"></input>
</div>
<div ng-hide="pinCode == null">
    <label>pincode:</label>
    <input type="text" ng-model="pinCode"></input>
</div>

现在我面临的问题是：

1.As 当我开始在表单的电子邮件字段中输入时，电子邮件字段变为 vanished.But，这不是其他字段的问题，它们非常好。

2.If 我在电子邮件字段中设置了 type="text"，而不是 type="email"...它有效...我只是无法理解这种行为。

所以，如果你能帮助我消化这种奇怪的行为，我将不胜感激......因为指令是一个非常酷的功能。

Answer 1

你关于 ng-hide="emailId == null" 的问题它会立即隐藏，因为在您键入完整的电子邮件地址之前，电子邮件 ID 无效。关于 null 对象的文档说 undefined==null 是真的。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/null

使用严格相等进行比较。

<div ng-hide="emailId === null">
    <label>Email:</label>
    <input type="email" ng-model="emailId"/>
</div>

Plunkr：http://plnkr.co/edit/q4B6jvHvB84SqMYRAaIC?p=preview"

Answer 2

@arun-shinde 关于该行为背后的原因是正确的，但是您也可以使用 ngModelOptions 避免它：

http://codepen.io/comakai/pen/JXJPrK

<div ng-app="app">
    <p>
        <input type="email" ng-model="a" />
    </p>
    <p>{{ a }}</p>
    <p>
        <input type="email" ng-model="b" ng-model-options="{allowInvalid: true}" />
    </p>
    <p>{{ b }}</p>
</div>

使用 angular 指令的自定义表单中的电子邮件字段在我输入时消失

email field in custom-form using angular-directive gets vanished when i type in

forms

input

html-email

angularjs

angularjs-directive