当我尝试使用自定义指令时，ng-disable 不起作用

Question

我正在学习 AngularJS。我正在尝试制作一个自定义指令来检查电子邮件是否已经存在。我从有 9 个用户的数组中收到我的电子邮件，我可以使用 Factory 成功获取它们。我的自定义指令的问题是，无论我输入什么输入，按钮都会被禁用。该指令的想法是，当我失去焦点时，它将检查电子邮件是否存在或不存在，如果不存在，它将禁用按钮，然后将启用该按钮。

.directive("registerUser",function(){
                            return {
                             
                                link:function($scope, element) {
                                    element.bind('blur',function () {
                                        var emailInput = element.val();
                                        var flag = "false";
                                        $scope.registeredUsers.forEach(element => {
                                            if(emailInput === element.email){
                                               flag = "true";
                                               console.log(emailInput);
                                               console.log(flag);
                                               return;
                                            }
                                        });
                                        $scope.invalidemail = flag;

                                    });}
                           }
                         })

这是我的指令，你可以看到我尝试使用标志它不起作用我尝试将标志更改为布尔值仍然不起作用我还将显示我的 HTML。我不确定 var emailInput = email.val() 是否会给我带来问题，因为我没有使用 ng-model。

<form action="">
    <input type="text" name="emailField" ng-model="emailInput" register-user>
    <input type="button" name="" value="check" ng-disabled= invalidemail>
</form>

那是我的 HTML。注意我没有检查电子邮件在此任务中是否有效。我只是在检查我的数组中是否已经存在电子邮件。

Answer 1

flag 的值被设置为"true" 或"false" 的字符串，而不是true 或false 的布尔值。

// not "false"
var flag = false;
// subsequently set it to true not "true"

您的表单模板在ng-disabled 和绑定值之间有一个空格。

<input type="button" name="emailButton" value="check" ng-disabled="invalidemail" />

您还可以使用Array.some() 更简洁地编写此代码，以查看数组是否包含您的值。

const emailInput = element.val();
$scope.invalidemail = !$scope.registeredUsers.some(element => emailInput === element.email);