Question

我目前正在学习AngularJS，我遇到了“Angular-Directives”这个主题。所以我计划制作自己的<custom-form>指令。

角色部分

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.一旦我开始输入表单的电子邮件字段，电子邮件字段就会消失。但是，这不是其他字段的问题，它们就完全没问题。

2.如果我在电子邮件字段中设置type =“text”，而不是type =“email”......它可以工作......我无法理解这种行为。

所以，如果你能帮助我消化这种奇怪的行为，那就太感激了...... coz指令是一个非常酷的功能。

Answer 1

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

Answer 2

您的问题 ng-hide =＆＃34; emailId == null＆＃34; 它会立即隐藏，因为在您键入完整的电子邮件地址之前，电子邮件ID无效。 null对象的文档说undefined == null为true。 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＆＃34;

当我输入时，使用angular-directive的自定义形式的电子邮件字段会消失

2 个答案: